快速看懂（找到）VUE框架的管理系统代码

前言

刚入职的且没有啥基础的小白一枚，培训期间要求一周时间内在现有demo系统上新增一个模块，实现简单的增删改查。
so，这是一个速成的帖子，提供一个大致思路（看代码＋修改代码）,不是正统的路子，所有的经验仅在公司扔给我的demo系统上摸索出来的~
后续自己会去系统的学习（补黑马的视频）~~

前端

前端代码使用到了vuex(为vue.js开发的状态管理模式）可以参考博客：

https://www.cnblogs.com/wangshucheng/p/vuex-001.html
https://www.cnblogs.com/dinghaoran/p/14212684.html
https://blog.csdn.net/guorui_java/article/details/122771767

主要是由index.vue和store文件夹下的index.js组成。

1. index.vue代码主要由三部分构成：template,script,style。

<template>
	//相当于html,写页面的组件（表单，表格等）
template>

<script>
import el from ...
import store from ...

	//component全局组件
	//export default相当于导出当前vue组件，在其它引入当前组件时可以使用当前组件中的方法和变量。
	export default Vue.component({
		//data起到局部变量（变量隔离）的作用，单组件的data必须返回一个对象，因为组件可能被用来创建多个实例，通过提供 data 函数，每次创建一个新实例后，能够调用 data函数，从而返回初始数据的一个全新副本数据对象。
		data(){//为变量赋值
		//不使用return包裹的数据项目全局可见；使用return包裹后数据变量只在当前组件中生效，不会影响其他组件.
			return{
				//变量1：值
			}
		}，
		created(){
			//在模板渲染HTML前调用，通常初始化某些属性值，然后再渲染试图。
		}，
		computed:{
			//计算属性，本质是方法，一定要有返回值。
		}
		methods:{
			//定义js函数
		}
	},
	{
		//vuex主要的核心概念：state，Getters，Mutation，Action，Module
		state:[]//加载全局变量
		mutations:{
			//store数据改变的唯一方法--提交mutations--存放着改变数据方法的集合。
			//通过mutation更新数据时，有可能带参数，参数被称为mutation的载荷（payload）
		},
		actions:[]//代替mutation进行异步操作，action提交mutation，不直接变更状态。  在组件中如果要调用action中的方法，需要使用dispatch()方法。
	},
	{
		store
	}
	)
script>

<style>
	//CSS，渲染template中组件的样式
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

2.store文件夹下的index.js定义了state,mutations,actions

const state={
	//定义的变量
	form:{
		...
		}
}

//修改state状态值
const mutations={
	method(state,payload){
		//第一个参数是state
		state.form=payload
	}
}

//异步操作（业务逻辑处理）
const actions={
	//函数
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

后端代码逻辑

主要是对java的各层级介绍。叫法可能不一样，但实现的逻辑都差不多，扔给我的代码中是四个层，分别是Bean层、Controller层、Service层、Servicelmpl层、Mapper层。

• Bean层：定义数据库表中的字段，并设置它的get,set方法。
• Controller层：负责请求转发，接受页面过来的参数，传给Service处理，接到返回值再传给页面。
• Service层：对一个或多个Dao进行封装，封装成服务。先设计接口，再设计实现类（Servicelmpl层），接着在配置文件中配置其实现的关联。
• Mapper层（Dao层）：属于底层，具体到对某个表的增删改查，一定是和数据库的某张表一一对应的。

前后端交互

1.前端发起请求并传送数据->根据后端返回的消息，做出相应

const actions={
	//这个写法可能不规范，但重点就是把地址传对，参数与后端接受格式一样，然后再处理返回值（我是参照已有代码的写法）,只需要改改这三个地方
	test({commit,dispatch,state,rootState},payload){
		el.post('请求（后端Control层定义的函数路径）地址‘，{
			state.fromdata //传入后台的数据
		}).then((res)=> res.json()).then((json) => {
			//json里包含的是后端返回的数据
			//这里可以对返回的数据做判断，然后做出相应的页面处理
			})
	}
}
1
2
3
4
5
6
7
8
9
10
11

2.后端接受请求->处理->返回给页面

@Controller     //标记在一个类上，标记的类是一个control对象
@ResponseBody	//将java对象转为json格式的数据，然后直接写入Http response的body中；一般在异步获取数据中使用
@RequestMapping("/test")    //映射URL到控制器类/到control控制器的处理方法上
//当Controller 类上没有标记@RequestMapping 注解时，方法上的@RequestMapping 都是绝对路径

public class TestController{
	@Autowired
	TestService testService;

	//postmapping是组合注释是@RequestMapping(method = RequestMethod.POST)的缩写
	@PostMapping(path="/query")
	public CommonResponse qureyTable(HttpSession session,@RequestBody TestBean test){
	//@RequestBody作用在形参列表上，用于将前端发送过来固定格式的数据封装为对应的JavaBean对象。传入数据的属性名称要和后端JavaBean中定义的一致。
	
		//把值传给Service进行处理
		...
		
		//返回值
		return new CommonResponse();
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20