前端:Vue+Element-plus+axios
后端:Springboot+Mybatis-plus
数据库:MySql+Redis
开发工具可以根据自己喜好:我使用的是IDEA+WebStorm
基础准备:
前端
nodejs:Node.js 中文网 (nodejs.cn)下载nodejs,具体教程其他帖子有
vue-cli:vue的脚手架工具,nodejs安装完毕后,npm安装cli
npm install -g @vue/cli
本地如果有yarn,可以用命令yarn安装
yarn global add @vue/cli
cmd打开命令行,直接用命令行开始,我用的npm
可能出现情况,报错4048,解决方案如下
管理员身份打开cmd,清除缓存 npm cache clean --force
如果出现disable,执行下一步,升级npm npm install -g npm@latest
然后重新安装npm-cli
后端(根据自己实际情况安装,这是我本地的情况)
jdk:8
redis:5.0.14.1
mysql:5.7.41
maven:3.6.3
maven和jdk需要配置环境变量,具体安装细节其他帖子有
一、数据库初始化
1.安装mysql和navicat,百度即可
2.打开navicat,右键,新建数据库,如果没有连接,新建连接,我直接新建数据库test
3.我们数据库名填test,字符集用utf8mb4,排序规则用unicode_ci,这是unicode的标准的方案,如果说考虑性能问题,选择general,这种我们的demo基本不考虑,标准的即可,然后确定
4.新建后,我们打开test,现在表是空的,新建表
5.设计表,如下,字段填写后,将id设置主键。勾选自动递增,点击保存,输入表名person,确定
6.补充表信息,随意即可
二、前端创建项目
1. 直接使用命令行创建项目,到自己所需创建的目录下打开cmd,输入
vue create springboot_vue-show
后面是创建的项目名,自己随意就行,出现如下提示,输入 Y 然后回车
2.选择版本,我选择当前这行版本,不同版本的脚手架位置顺序会不一样,我选择3,回车
3.包管理工具的选择
npm:不推荐,串行安装,而且删除modules文件夹后无法重新利用缓存,可以更换为国内淘宝镜像
pnpm:推荐,本地集中式仓库,单依赖重新引用只会改变版本,并不会重新copy一个文件夹,然后更新版本号,毕竟pnpm 的项目初衷是节约磁盘空间并提升安装速度
4.等待创建完毕
OK了,我们可以在本地的文件夹看到所创建的文件,不要关闭命令行
5.使用webstorm打开cli创建的项目
6.命令行中继续根据提示对着敲,进入到对应的文件夹,启动服务
7.启动成功后我们看到如下,然后浏览器输入http://localhost:8080/
8.OK了
三、前端配置
1.依赖安装
由于vue-cli3没有路由选择等,所以我们需要手动敲命令行安装依赖,首先安装路由,在安装路由之前,执行下列命令,如果用的npm包管理,则用npm安装依赖
pnpm install
安装后,控制台展示这样
2.路由安装
我们安装路由,控制台会出现一些弃用版本,不用管
pnpm install vue-router
安装成功后,我们在package.json会出现路由
3.ElementUI
我们直接完全引入,webstrom打开命令行
vue3需要适配elementplus,所以不能用原来的elementui
pnpm install element-plus --save
也可以按需引入,具体详见饿了么UI官网
安装成功后
然后需要在main.js中添加官网的示例代码
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
4.axios
和后台交互,当然不能缺少axios,控制台直接敲
pnpm install axios
成功后如图
四、前端文件目录解读
1.node_modules
这个是存储我们依赖中安装的一些包,一个node.js对应着一个模块,存有一个编译后的扩展文件,net、http都是由node.js提供,包含核心模块和文件模块,核心模块直接用变量名解读,文件模块直接用相对路径来获取
2.public
存放一些公用的js文件
3.src
Source源文件,我们在开发过程中最常用的文件夹,存储我们的源码
3.1 assets
存放图片
3.2 components
子组件目录夹,vue是组件开发,在开发过程中存储着一些子组件
3.3 App.vue
父组件,我开发的习惯是把父组件放在外层,并创建同级的components,用于存放子组件
3.4 main.js
提高开发效率的组件下公用js文件,作用有三,一是存放全局变量,方便调用,二是作为入口,来实例化vue,三用来存储全局css样式以及插件,通常来作为入口
五、Springboot创建
创建方式有两种,一是使用IDEA自带的脚手架工具创建,二是官网选择配置后down,然后引入IDEA,我就直接用IDEA了,方便快捷,前提是我们不管是哪种方式,要能连上spring官网(患常就抽风,上不去)
1.打开IDEA-New Project
然后就能看到IDEA新建时候的一些选项,我们选择spring的脚手架工具,修改项目名,根据自己本地的jdk修改版本,打包方式Jar,然后点击next
2.到我们的springboot的配置阶段,我们选择lombok、springweb和spring data jpa,然后点击finish
lombok能简化开发,@Data注解可以不用写setter和getter还有equals方法,以及自动化日志变量,springweb是web启动器,spring data是spring提供的数据库访问技术,jpa是标准的orm解决方案
3.创建完成后,左侧是我们的工作目录,中间是工作区,右侧是我们的包管理工具maven,maven平级的是database,可在idea中安装驱动直接连数据库,很好用(根据idea版本的不同,早一些的版本需要手动安装database插件)
4.修改我们的maven本地仓库路径,左上角File-Settings,然后修改成本地maven路径,勾选上后面的Override,setting文件指向本地,repository是我们本地存储包的路径,默认是C盘,我们需要手动更改,然后reply,ok,然后我们退出来后maven会自动下载需要的jar,如果报错,用idea打开maven的setting.xml文件,检查一下格式
六、整合
前提:我们从脚手架down下来的springboot版本是比较新的,在3.0版本以上,只能使用jdk17版本,所以我们要么升级本地的jdk,修改配置文件,要么修改springboot版本
我本地是8,所以需要降版本,前往spring官网,找到GA版本的springboot,然后修改pom中的版本号 2.7.13,然后编译器build
1.后台连接数据库
首先我们要在idea中连接数据库,先把脚手架为我们生成的删掉 ,手动建一个application.yml,两者功能一样,但是语法不同,我比较喜欢yml
手动粘贴下列代码,username和password需要手动更改成自己的
server:
port: 8081
spring:
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/test
username: root
password: 123456
#配置 Jpa
jpa:
hibernate:
ddl-auto: update
# SQL语句打印
show-sql: true
# 配置方言
database-platform: org.hibernate.dialect.MySQL5Dialect
如果出现粘贴后爆红,需要在pom中增加依赖,在pom中粘贴下列代码,需要修改version的版本号,根据自己本地修改
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.6</version>
</dependency>
粘贴位置如下,要放在里面,然后maven重构,我们启动项目,验证是否可以连接到本地的数据库并成功启动后台
我们这里的端口指向的是yml的配置文件中的port, 然后打开浏览器验证
出现这为启动成功
2.整合mybatis
在pom文件中加入并maven重构
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.2</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.1.20</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
3.后台流程创建
我们需要后台建立我们的四个层,controller,service,Mapper层+实体层,目录如下,我们采用的是注解开发,所以没有dao层对应的xml文件
3.1实体层Entity
@Data注解是我们引入的lombok插件
@Data
public class PersonSltEntity {
//id
private Integer id;
//姓名
private String name;
//性别
private String sex;
//年龄
private Integer age;
}
3.2控制层Controller
@autowired是注入bean
@RestController
@RequestMapping("/person")
public class PersonSltController {
@Autowired
PersonSltService personSltService;
@GetMapping("/selectAll")
public List<PersonSltEntity> getAll(){
return personSltService.getSelectAll();
}
}
3.3服务层Service
public interface PersonSltService {
List<PersonSltEntity> getSelectAll();
}
3.4服务层实现类ServiceImpl
@Service
public class PersonSltServiceImpl implements PersonSltService {
@Autowired
PersonSltMapper personSltMapper;
@Override
public List<PersonSltEntity> getSelectAll() {
List<PersonSltEntity> list = personSltMapper.selectAll();
return list;
}
}
3.5Mapper
如果没有引入mybatis-plus或者mybatis,我们是不能用@mapper注解的
@Mapper
public interface PersonSltMapper {
@Select("select * from person")
List<PersonSltEntity> selectAll();
}
3.6启动类问题解决
创建之后我们启动,并不会报错,这个时候我们的启动类在当前文件夹结构,是扫描不到我们的controller层的,需要把我们的person转移到启动类同级的文件夹目录下
3.7启动项目,验证后台连接是否正常
浏览器输入
http://localhost:8081/person/selectAll
如果出现如下,我们后台连接就ok了!
3.8前后端数据连通
我们在前端父组件中加入下列代码,来访问后台数据库
<template>
<div>
<table>
<tr>
<td>编号</td>
<td>名字</td>
<td>性别</td>
</tr>
<tr v-for="person in personEnt" :key="person">
<td>{{person.id}}</td>
<td>{{person.name}}</td>
<td>{{person.sex}}</td>
</tr>
</table>
</div>
</template>
<script>
import axios from "axios";
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Person",
data(){
return {
personEnt:[
{
id: 1,
name: '张三',
sex: '男'
},
{
id: 2,
name: '李四',
sex: '女'
}
]
}
},
created() {
var that=this;
axios.get('http://localhost:8081/person/selectAll').then(function (resp) {
that.personEnt=resp.data;
})
}
}
</script>
<style scoped>
</style>
在这里配置url,跟我们后端的url一致
这个时候我们访问后台会出现跨域问题,后台端口是8081,前台端口是8080,我们需要在后端代码中配置跨域,我们新建一个类,在common文件夹下,然后粘上代码
@Configuration
public class Config implements WebMvcConfigurer {
/**
* 开启跨域
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
// 设置允许跨域的路由
registry.addMapping("/**")
// 设置允许跨域请求的域名
.allowedOriginPatterns("*")
// 是否允许证书(cookies)
.allowCredentials(true)
// 设置允许的方法
.allowedMethods("*")
// 跨域允许时间
.maxAge(3600);
}
}
OK,我们重启后台,成功~
4.vue应用
4.1整合vuex
应用vue的集中管理模式
pnpm install vuex
4.2编写bable.config.js
在父目录下,创建文件bable.config.js,并将代码copy
Babel 使用 AST 把不兼容的代码编译成 ES15 版本,因为大多数浏览器都支持这个版本的 JavaScript 代码,主要是规避一些问题
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
// 新增代码
plugins: [
[
"import",
{
libraryName: 'element-plus',
customStyleName: (name) => {
return `element-plus/lib/theme-chalk/${name}.css`;
}
}
]
]
}
4.3store配置
在父目录下,创建store文件夹,store下创建modul,然后和modul平级创建index.js,modul下创建mask.js
index.js文件下代码
import { createStore } from "vuex";
import mask from "./modul/mask";//引入模块拆分化之后的一个文件夹,每一个模块都可以有自己的state,mutations,actions,modules
export default createStore({
state: {},
mutations: {},
actions: {},
modules: {
mask,
},
});
mask.js代码
初始化命名空间和一些方法
export default {
namespaced: true,
//开启命名空间,之后在不同页面中引入getter、actions、mutations时,需要加上所属的模块名
state: {//定义一个数据
audit: false,
},
mutations: {//store中更改state数据状态的唯一方法(mutations必须是同步函数)
disaf(state) {
state.audit = true;//改变数据的方法,方法名为audit
},
disaf1(state) {
state.audit = false;
},
},
actions: {},//action: 包含异步操作(请求API方法)、回调函数提交mutaions更改state数据状态,使之可以异步。
getter:{},//getter:从基本数据(state)派生的数据,相当于state的计算属性
modules: {},//module: 模块化Vuex(将store分割成不同的模块)
};
整合后目录图片
4.4app.vue粘贴下列代码
<template>
<div>
<table>
<tr>
<td>编号</td>
<td>名字</td>
<td>性别</td>
</tr>
<tr v-for="App in personEnt" :key="App">
<td>{{ App.id }}</td>
<td>{{ App.name }}</td>
<td>{{ App.sex }}</td>
</tr>
</table>
</div>
<div class="hello">
<h1>{{ msg }}</h1>
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
</div>
</template>
<script>
import axios from "axios";
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "App",
data(){
return {
personEnt:[
{
id: 1,
name: '张三',
sex: '男'
},
{
id: 2,
name: '李四',
sex: '女'
}
]
}
},
created() {
var that=this;
axios.get('http://localhost:8081/person/selectAll').then(function (resp) {
that.personEnt=resp.data;
})
}
}
</script>
<style scoped>
</style>
el是引用elementplus后的代码
然后,我们需要修改main.js文件的代码!!!
然后,我们需要修改main.js文件的代码!!!
然后,我们需要修改main.js文件的代码!!!
因为这个时候我们的elementplus的路径是无法真正引入的,所以我们要手动引入
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './person/router/router'
import store from '/store/index.js'
import ElementPlus from '../node_modules/element-plus';
// 新增代码:引入全部组件及样式
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(store)
app.use(router)
app.use(ElementPlus)
app.mount('#app')
展示之后是这样的
OK!收工!
目前框架内是空的,后续会整合策略模式,redis引用,fastdfs整合等
下一个从零开始搭建springcloud