项目流程
-
需求分析
谈需求,需要懂业务的人去做 -
做原型
给客户看—迭代模型—最终敲定 -
设计
-
编码
-
测试
-
修改bug
-
上线(交付客户)
Vue路由
创建routerdeom01
- 打开cmd
- 下一步下一步,然后创建成功
IDEA打开
npm install element-plus --save
- 配置main.js
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
createApp(App).use(router).use(ElementPlus).mount('#app')
创建一个Login.vue
删除创建项目时自带的两个组件
- template区域
<div class="login">
<el-form :model="loginForm" label-width="80px" >
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login()">登录</el-button>
<el-button @click="resetForm('loginForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
- script区域
data(){
return{
loginForm:{
username:'张三',
password:1234
}
}
}
- 样式
<style scoped>
.login{
width: 500px;
height: 300px;
margin: 0 auto;
}
</style>
- 效果
配置路由
- index.js
import Login from "@/views/Login";
const routes = [
{
//设置为默认界面
path: '/',
name: 'login',
component: Login
},
]
- app.vue中template只保留
<nav>
<router-view/>
</nav>
发送请求
- 登录为什么最好用POST请求?
用GET请求,账号密码会显示在地址栏
- 登录按钮绑定login函数
- 导入axios
npm install axios
- 应用POST请求
//向后端发请求
axios.post('http://localhost:9000/login', {
username: this.loginForm.username,
password: this.loginForm.password
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
创建Spring Boot项目insurance
创建好后解压缩,然后IDEA打开,记得配置Maven
-
配置端口
-
导入统一返回结果
-
创建InsuranceController
@RestController
public class InsuranceController {
@PostMapping("/login")
public ResponseData login(@RequestBody LoginVO loginVO){
System.out.println(loginVO);
return null;
}
}
- 创建LoginVO
用于封装前端传来的信息
- 接收前端的数据
利用MyBatis的Generator生成bean、mapper、mapper.xml
- MyBatis依赖
<!-- mybatis依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.3.1</version>
</dependency>
- Generator依赖
<!-- generator依赖 -->
<dependency>
<groupId>org.mybatis.generator</groupId>
<artifactId>mybatis-generator-core</artifactId>
<version>1.3.7</version>
</dependency>
- MySQL依赖
<!-- MySQL驱动 -->
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
- 导入generatorConfig.xml和Generator类
- 配置application.yml
- Generator生成
向数据库查询信息并匹配
- 前端
- 后端
前端增加树形菜单
新创建routerdemo02
版本选择Vue2
导入各种组件
- elementui
npm i element-ui -S
- 完整引用 Element
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
- 导入login.vue
- 安装axios
npm install axios
引用
创建组件
Index.vue包含Head.vue和Main.vue
Main.vue中包含SideBar.vue和Content.vue
配置路由
各个组件的CSS
- App.vue
/*清屏*/
*{
padding:0;
margin: 0;
}
- Index.vue
.index{
/*将元素的子元素排列在一条线上,并根据一定的规则进行布局*/
display: flex;
/*子元素将依次从上到下排列*/
flex-direction: column;
height: 1000px;
}
- Head.vue
.head{
flex: 1;
border: 1px solid;
}
- Main.vue
.main{
flex: 8;
display: flex;
}
- SideBar.vue
.sideBar{
flex: 2;
border: 1px solid;
}
- Content.vue
.content{
flex: 9;
border: 1px solid;
}
效果
SideBar.vue中加入菜单
代码来源于element
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>保险清单</span>
</template>
<el-menu-item index="1-1">新增保险</el-menu-item>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">迁改清单</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-setting"></i>
<span slot="title">汇总统计</span>
</el-menu-item>
</el-menu>