环境搭建
安装Node
-
下载并安装nodejs
官网:https://nodejs.org/en/download/
选择LTS版本,适合自己系统的版本下载,修改好安装位置即可。为了尽量不占用系统盘,且不需要管理员权限访问文件夹,建议安装在D盘。我按装位置是 D:/Develop/nodejs -
检验安装成功
安装node之后会默认为我们安装npm包管理器,并且npm版本低于node版本。 -
设置缓存位置和全局安装位置切换淘宝镜像源
在nodejs安装目录创建文件夹 node_global 和 node_cache。如果发现需要管理员权限,只要右键nodejs文件夹 -> 属性 -> 安全 -> 编辑 -> 设置完全控制。之后发现新建文件夹时不再需要管理员权限
之后打开cmd,输入以下命令npm config set prefix "D:\Develop\nodejs\node_global" npm config set cache "D:\Develop\nodejs\node_cache" npm config set repository https://registry.npm.taobao.org
-
配置环境变量
右键我的电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 系统环境变量 -> 新建
变量名:NODE_HOME
变量值:D:\Develop\nodejs\node_global\node_modules
点击Path,编辑 -> 新建,加入以下条件:D:\Develop\nodejs\node_global D:\Develop\nodejs\
Vue2环境
- 安装Vue
npm install vue -g npm install vue-cli -g
- 创建Vue2项目
cd D:\vue-project vue init webpack test01
- 构建并运行
npm install npm run serve
Vue3 环境
- 安装Vue
npm install -g vue@next npm install -g @vue/cli 或 yarn global add @vue/cli
- 创建vue项目
之后我们将自动打开浏览器,开始创建项目。vue ui
- 点击创建,指定项目路径,创建文件即可
- 取个项目名,包管理器可以使用yarn也可以使用npm。不需要创建git仓库
- 选一套预设,我们选择Vue3,也可以选择Vue2或者手动配置,点击创建项目
- 项目创建完成
- 运行一下试试吧
左侧任务,server,运行即可。默认工作在8080端口,可以点击输出查看日志
- 运行成功
如果我们需要再去安装一些依赖或者组件,比如element UI,可以使用npm或者yarn,但是可能不会更新文件目录。这里可以使用GUI来安装。
- 安装依赖
以安装elementUI为例,点击左侧依赖,然后点击右上角安装依赖,搜索elementUI,选择运行依赖和开发依赖,搜索elementui,然后选择第一个安装即可
Vue介绍
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue官网为我们提供了一套教程:https://v3.cn.vuejs.org/guide/introduction.html
Vue2和Vue3
Vue2和Vue2的区别:
- 响应原理不同
Vue2.x实现双向数据绑定原理,是通过es5的 Object.defineProperty,根据具体的key去读取和修改。其中的setter方法来实现数据劫持的,getter实现数据的修改。但是必须先知道想要拦截和修改的key是什么,所以vue2对于新增的属性无能为力,比如无法监听属性的添加和删除、数组索引和长度的变更,vue2的解决方法是使用Vue.set(object, propertyName, value) 等方法向嵌套对象添加响应式。
Vue3.x使用了ES2015的更快的原生proxy 替代 Object.defineProperty。Proxy可以理解成,在对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy可以直接监听对象而非属性,并返回一个新对象,具有更好的响应式支持 - 生命周期函数不同:
Vue3的生命周期函数名为:“on”+hook。
beforeCreate -> 请使用 setup()
created -> 请使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
errorCaptured -> onErrorCaptured
Vue3优点
参考文献:https://zhuanlan.zhihu.com/p/410951679
- 性能提升
vue2中的虚拟dom是全量的对比(每个节点不论写死的还是动态的都会一层一层比较,这就浪费了大部分事件在对比静态节点上)
vue3新增了静态标记(patchflag)与上次虚拟节点对比时,只对比带有patch flag的节点(动态数据所在的节点);可通过flag信息得知当前节点要对比的具体内容。 - 按需编译,体积更小
Vue目录结构
根目录
- node_modules:项目需要的依赖和插件,当我们执行
npm install
时会创建该目录并将依赖下载至该目录。该文件夹比较大,在我们上传代码时可以将该目录删除。 - public:公共资源,存放页面图标和不支持 JavaScript 情况时的页面。
- src:源码
- assets:资源文件,比如存放 css,图片等资源。
- component:组件文件夹,用来存放 vue 的公共组件(注册于全局,在整个项目中通过关键词便可直接输出)。
- router:router配置路由。
- index.js:用于配置路由,确定访问哪个URI将跳转至哪个页面
- views:用来放主体页面,虽然和component文件夹都是 vue 文件,但 views 下的 vue 文件是可以用来充当路由 view 的。
- App.vue:阅读main.js可知,这是应用的入口。当项目部署起来之后就会访问这个文件
- main.js:是项目的入口文件,作用是初始化 vue 实例,并引入所需要的插件。
- babel.config.js:babel 转码器的配置文件。
- package.json:非常重要的一个文件,它存放项目配置及所需的依赖版本等,功能类似maven的pom.xml
- vue.config.js:vue配置文件
- yarn.lock:用来构建依赖关系树。为避免包版本不匹配,确切安装的版本被固定在包锁定文件中。每次添加模块时,npm 和 Yarn 分别创建(或更新)一个package-lock.json和yarn.lock文件。这样,您可以保证另一台机器安装完全相同的软件包,同时仍然具有package.json。
npm和yarn
参考文献:https://www.w3cschool.cn/article/9538462.html
两者都是包管理器。在我们安装好node之后就会安装npm,要安装使用yarn需要安装一下:
npm install -g yarn
总的来说,yarn并发下载配置包,速度更快一点,也更加安全。
下面来看一下使用的命令的区别,我们只看常用的几个命令
# 安装依赖
npm install 或 yarn install
# 部署项目
npm run serve 或 yarn serve
# 编译项目
npm run build 或 yarn build
# 安装一个包
npm install [package] 或 yarn add [package]
# 卸载一个包
npm uninstall [package] 或 yarn remove [package]
# 安装一个包作为开发依赖
npm install --save-dev [package] 或 yarn add --dev [package]
# 卸载开发依赖包
npm uninstall --save-dev [package] 或 yarn remove [package]
# 更新依赖
npm update 或 yarn upgrade
# 更新一个包
npm update [package] 或 yarn upgrade [package]
# 查看配置
npm config list 或 yarn config list
# 修改配置
npm config set [key] [value] 或 yarn config set [key] [value]
项目实战
-
新建一个项目,熟悉vue基本用法。参考官方文档:
https://v3.cn.vuejs.org/guide/introduction.html -
安装router插件,我们在页面跳转的时候会用到。
https://v3.cn.vuejs.org/guide/routing.html -
安装axios依赖,我们在使用异步请求来向后端获取数据的时候用到。
https://axios-http.com/docs/intro -
安装elementUI plus,是一个组件库,当我们需要layout布局,表格,抽屉,按钮等组件时直接拷贝代码粘贴到我们的项目中然后修改即可。
QuickStart:https://element-plus.gitee.io/zh-CN/guide/quickstart.html
组件库:https://element-plus.gitee.io/zh-CN/component/button.html
cmd执行yarn add element-plus
项目完整引入ElementPlus,修改main.jsimport { createApp } from 'vue' import App from './App.vue' import router from './router' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' createApp(App) .use(router) .use(ElementPlus) .mount('#app')
-
开始开发,首先可以编辑入口界面App.vue。直接去element Plus找个好看的Container布局粘过来。注意以下要求:
左侧导航栏要有路由功能,只要在el-menue添加router
属性或router="true"
每个菜单项index="URI"
,这里URI是访问路径。一会儿在 router/index.js中设置。
el-main
标签内添加router-view
标签,这样页面跳转之后会作为子页面在中间显示。
大致这样:<el-container> <el-header>Header</el-header> <el-container style="height: 2000px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu router :default-openeds="['0']"> <el-submenu index="0"> <template slot="title"><i class="el-icon-notebook-1"></i>通信录</template> <el-menu-item index="StudentManage"><i class="el-icon-refresh"></i>信息查询</el-menu-item> <el-menu-item index="AddStudent"><i class="el-icon-edit"></i>添加信息</el-menu-item> <el-menu-item index="StudentSearch"><i class="el-icon-search"></i>查找</el-menu-item> <el-menu-item index="Fuzzy"><i class="el-icon-view"></i>模糊查询</el-menu-item> <el-menu-item index="Dustbin"><i class="el-icon-delete"></i>回收站</el-menu-item> </el-submenu> </el-menu> <el-menu> ...... </el-menu> <el-aside> <el-main> <router-view></router-view> </el-main> </el-container> </el-container>
-
设置路由
修改 router/index.js 。有两种方式,第一种先import页面作为组件,然后配置。另一种不要先import,直接在component属性中动态添加。import StudentManage from '../views/StudentManage' const routes = [ // 第一种方式,先import再使用 { path: "/", name: "通信录", component: Index, redirect: "/StudentManage", }, { path: "/AddStudent", name: "添加信息", component:()=>import("../views/AddStudent") } ]
这样当我们访问 / 时会跳转到 /StudentManage ,返回的页面是 src/views/StudentManage
当访问 /AddStudent 时返回的页面是 src/views/AddStudent -
axios异步请求获取数据并展示
如何获取数据data() { return { pageSize: 0, total: 0, tableData: [] // 定义一个一维数组,用于接受数据 } }, page(currentPage) { const _this = this // axios发送异步请求来获取数据 axios.get('http://localhost:8181/student/findAll/' + (currentPage - 1) + '/10').then(function (resp) { console.log(resp) _this.tableData = resp.data.content _this.pageSize = resp.data.size _this.total = resp.data.totalElements }) }
如何绑定数据,建议先去看以下 element Plus的示例代码,以及每个属性的含义
el-table
标签中data属性代表绑定的数据的数组
el-table-column
标签中的prop指定和每个元素的哪个属性绑定。
这里我们tableData
是Student
数组,而Student类有以下属性{ id: 1, number: "xxxx", ..... }
vue中的代码片段
<el-table :data="tableData" border style="width: 100%"> <el-table-column prop="id" label="序号" width="50"></el-table-column> <el-table-column prop="number" label="学号" width="90"></el-table-column> ..... 若干个<el-table-column>标签用于将所有需要展示的属性进行绑定....... </el-table>
-
带有参数的页面跳转
在前后端分离之前,我们的页面跳转分为服务器端跳转和客户端跳转。- 服务器端跳转是指,Servlet接受Request之后将请求转给另一个服务器资源,给出响应,期间只请求一次,而且URL不变。一般是使用RequestDispather对象的forward方法
request.getRequestDispatcher("login.jsp").forward(request,response) ;
- 客户端跳转则是指,Servlet拿到请求之后返回一个URL,之后客户端拿着这个URL再发一次请求,这样需要两次请求且URL改变。一般是使用HttPservletResopse对象的sendRedirect函数实现
而现在,我们前后端分离,在进行页面跳转时有所改变。如果我们要进行客户端跳转,则只要给出URL即可,无需访问后端请求数据。比如我们一开始在给导航栏设置路由的时候,给每个
menu-item
的index属性绑定了一个URL,这样点击的时候就实现了无参数的客户端跳转。现在,比如我要修改某个学生的信息,需要知到这个学生的id,同时需要跳转到更新学生信息的页面。而我们请求后端只能拿到数据或者告诉后端要进行哪些操作,后端无法给我们重定向的URL,无法实现服务器端跳转。这时,我们只要实现客户端跳转,然后传一个参数即可。方法是:从StudentManage页面跳转到StudentUpdate页面时指定URL,并且传一个参数。当我们跳转到StudentUpdate页面后,JavaScript拿到这个参数去请求后端拿到数据,或者发送指令。
StudentManage.vue中的跳转代码editStudent(row) { this.$router.push({ path: '/update', // 指定跳转路径 query: { // 添加参数 id: row.id } }) }
StudentUpdate.vue中拿到参数并请求后端获取数据
created() { const _this = this // 获取参数方法:this.$route.query.id axios.get('http://localhost:8181/student/findById/' + this.$route.query.id).then(function(resp) { console.log(resp) _this.form = resp.data }) }
在页面跳转时,我们可以发现,请求的URL变了,从
http://localhost:8080/StudentManage
变为http://localhost:8080/update?id=1
- 服务器端跳转是指,Servlet接受Request之后将请求转给另一个服务器资源,给出响应,期间只请求一次,而且URL不变。一般是使用RequestDispather对象的forward方法
-
想了解更多后端实现细节及代码,请移步我的另一篇博客:http://t.csdn.cn/qwGVS