前后端分离

mybatis的分页

配置分页插件

使用分页

1. IPage<BookType> iPage = new Page<>(currentPage, pageSize);
2. iPage = bookTypeDao.selectPage(iPage, null);
3. List<BookTypeVo> bookTypeVos = new ArrayList<>(100);
4. for (BookType record : iPage.getRecords()) {
5. bookTypeVos.add(new BookTypeVo(record));
6. }
8. IPage<BookTypeVo> p = new Page<>();
9. p.setRecords(bookTypeVos);
10. p.setTotal(iPage.getTotal());
12. return p;

前端工程化

前后端分离的基础。

vscode, node.js

vscode

配置浏览器

vue

elementUI

other

安装node.js

下载安装

测试

node -v

npm -v

解决vscode运行命令行问题

1. PS C:\Users\Administrator> Get-ExecutionPolicy
2. Restricted
3. PS C:\Users\Administrator> Set-ExecutionPolicy RemoteSigned
5. 执行策略更改
6. 执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
7. 中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
8. [Y] 是(Y) [A] 全是(A) [N] 否(N) [L] 全否(L) [S] 暂停(S) [?] 帮助 (默认值为“N”): y
9. PS C:\Users\Administrator>

创建前端项目

安装(npm)

1. npm install -g @vue/cli@4.5.15

创建vue-cli项目

检测vue版本

1. PS D:\wnhz-09-workspace\wnhz-2048> vue --version
2. @vue/cli 4.5.15

创建项目

1. vue create wnhz-web

项目配置

选择： Default（第一项)

测试

添加淘宝镜像

1. npm install -g cnpm --registry=https://registry.npm.taobao.org
2. npm config set registry https://registry.npm.taobao.org

安装elementUI

npm安装

1. npm i element-ui -S

配置

main.js中配置全局elementUI

使用vue

1. <template>
3. ---只能有一个根标签
5. </template>

在App中引入组件

import Nav from ‘./components/Nav.vue’

定义组件

1. export default {
2. name: 'App',
3. components: {
4. HelloWorld,
5. Nav
6. }
7. }

使用组件

1. <template>
2. <div id="app">
3. <img alt="Vue logo" src="./assets/logo.png">
4. <HelloWorld msg="我的第一个vue项目^_^"/>
5. <Nav/>
6. </div>
7. </template>

路由

Vue Router | Vue.js 的官方路由 (vuejs.org)

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

安装路由

1. npm i vue-router@3.5.3

router使用

创建路由文件

src/router文件

创建路由index.js

在main.js中配置路由

1. import Vue from 'vue'
2. import App from './App.vue'
4. Vue.config.productionTip = false
6. import router from './router'
7. Vue.use(router)
9. new Vue({
10. render: h => h(App),
11. router,
12. }).$mount('#app')

页面

• Nav.vue

• Tab.vue

  

配置路由

页面跳转

• js代码

  1. showTab(){
  2. window.location.href= '/#/tab'
  3. }

axios

安装axios

1. npm install axios

配置工具

1. //定义全局axios的请求对象工具
3. import axios from 'axios'
5. const $request = axios.create({
6. timeout: 10000
7. });
8. //前端拦截器
9. $request.interceptors.request.use(
10. config=>{
11. config.headers['Content-Type']='application/json;charset=utf-8';
12. return config;
13. },error=>{
14. return Promise.reject(error);
15. }
16. );
18. export default $request;

使用ajax

VUE： MVVM