大规律：
页面：事件源-->绑定事件-->处理函数-->数据校验-->发送请求和数据-->处理响应结果展示给用户
后台: 接收请求-->接收数据-->转发业务层(业务处理)-->持久层(CRUD)-->业务层-->表现层-->页面
使用ElementUI来构建页面，在页面上引入 js 和 css 文件即可开始使用 index.css、vue.js、index.js ```html <!-- 引入ElementUI样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme- chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- 引入ElementUI组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 使用Vue: ``` <script src="js/vuejs-2.5.16.js"></script> `` Vue: <html> <head> <script src="vue.js"></script> <script src="axios.js"></script> </head> <body> <div id="app"> v-model：作用：将Vue中的数据更新到表单项value属性上 v-bind:/: v-if： v-for:遍历 v-on:/@:<button @click="fun('这是使用vue绑定的点击事件')">vue的onclick</button> </div> <script> new Vue({ el:'#app', datas:{ 属性名:属性值,... }, //定义方法 methods:{ method:function(){}, method2(){ //发送异步请求，axios axios.get(url?key=value&...) .then((res)->{}) .catch(()->{}) .finally(()->{}); axios.post(url,data) .then((res)->{}) .catch(()->{}) .finally(()->{}); } }, //钩子函数，VUE对象初始化完成后自动执行 created(){ }, mounted(){ } }); </script> </body> </html> created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。 ———————————————— ElementUI:复制粘贴修改 table form pagination ... 》后台 表现层(SpringMVC)-->Controller @Controller+@ResponseBody / @RestController 接收页面请求 (类+方法)@RequestMapping/@GetMapping/@PostMapping/@DeleteMapping/@PutMapping 接收页面参数 简单数据类型 url?id=x&name=y @RequestParam url/x/y @PathVariable application/json：@RequestBody 接收集合 转发业务层 @Reference @Autowired 响应结果 @ResponseBody @RestController @RequestMapping("/xxx") public class XxxController{ @Reference / @Autowired private XxxService xxxService; @RequestMapping/@GetMapping/@PostMapping/@DeleteMapping/@PutMapping public xxx methodName(...){ } } 业务逻辑 @Service @Transactional @Autowired serverInterface public interface XxxService{ public xxx methodName(...); } serviceImpl @Server @Transactional public class XxxServiceImpl implements XxxService{ public xxx methodName(...){ } } 持久层 Mybatis Mapper.java public interface XxxMapper{ public xxx methodName(...); } Mapper.xml 规则： （1）映射文件中的namespace要和接口的类全名保持一致 （2）映射文件中的statementId(statment:select update delete select)要和接口的方法名一致 （3）映射文件中的parameterType要和接口方法的参数一致 （4）映射文件中的resultType/resultMap要和接口方法的返回值一致 SQL / resultMap / <sql> <where> <if> <selectKey> domain 数据库表