2023-7-19

项目流程

• 需求分析
  谈需求，需要懂业务的人去做

• 做原型
  给客户看—迭代模型—最终敲定

• 设计

• 编码

• 测试

• 修改bug

• 上线（交付客户）

Vue路由

创建routerdeom01

• 打开cmd
  
  
  
  
• 下一步下一步，然后创建成功
  

IDEA打开

• 导入element-plus

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>

最终效果