Vue学习

vue配置

• Babel 将ES6转换成浏览器能识别的ES%
• TypeScript js超集，vue3.0以后使用ts编写
• Router 路由
• vuex
• CSS Pre-processors css解析器
• Linter / Formatter 文本规范
• router路由有history与hash模式
  • hash模式：当前浏览器访问都有#
  • history模式：不需要#，但后端需要服务器支持

项目目录结构

• node-model 放置依赖
• public 放置入口公共依赖
• src 开发目录
• package.json 项目配置文件
  • "scripts": {} vue脚手架启动和打包
  • "dependencies":{} 打包完后依赖的文件
  • "devDependencies":{} 开发环境的依赖，打包后使用的生产环境就不需要了
• vue.config.js 跨域处理，定义全局变量，按需打包等需求都可在此处配置
  • module.exprots ={ devServer: { port:8080,//端口 host:'localhost',//服务ip地址 open:true//配置浏览器自动访问，启动服务后会自动打开浏览器 proxy: //配置跨域}}

Xxx.vue

• <template></template> html模板

• <script> </script> js脚本，

  • export default{} 其中的data(){return {}} 返回json数据给template

  • 承上，created(){axios.get('url',callback)}需配置 向服务器发送ajax异步请求(vue add axios)，把回调函数中收到的数据写入同级的data方法中，data方法将数据返回给template

  • method:{} 函数定义template中的事件，如翻页

• <style></style> css样式

原理

• router/index.js ，引入view目录下的视图进行映射，相当于servlet中的web.xml，将view/*下的Xxx.vue映射到App.vue

• view/*下的所有视图在App.vue上切换

• App.vue上面是不同的view下的视图，下层是components下的视图。App.vue充当的是localhost:8080 层次

跨域(两种解决方案)

1. 后端SpringBoot解决

   • 实现WebMvcConfigurer接口，重写addCorsMappings()，进行注册
     

2. 前端

插件

• axios :使用ajax需要配置的插件

nginx

• 服务
  • 启动服务。./nginx
  • 正常关闭服务。./nginx -s quit
  • 强制关闭服务。./nginx -s stop
  • 重新加载配置文件。./nginx -s reload

Vue 集成 Element UI

Element UI 后台管理系统主要的标签：

• le-container: 构建整个页面框架

• el-aside：构建左侧菜单

• el-menu：左侧菜单内容，常用属性

• el-main：中间展示数据的区域，内容是view下的自定义的页面

  • default-openeds 默认展开的菜单，通过菜单的 index 值来关联
  • default-active 默认选中的菜单，通过菜单的 index 值来关联

• el-submenu：可展开的子级菜单，常用属性：

  • index：菜单的下标，文本类型，不能是数值类型

• template：对应的 el-submenu 的菜单名，两者相辅相成

• i：设置菜单图标，通过 class 属性设置。

  • el-icon-message
  • el-icon-setting
  • el-icon-menu

• el-menu-item：菜单的子节点，不可再展开，常用属性：

  • index：菜单的下标，文本类型，不能是数值类型

Vue router 来动态构建左侧菜单

• 导航1
  • 页面1
  • 页面2
• 导航2
  • 页面3
  • 页面4

menu 与 router 的绑定

1. 标签添加 router 属性，才能将每个路由与页面跳转链接绑定
2. 页面中添加 标签，它是一个容器，动态渲染你选择的 router
3. 标签的 index 值就是要跳转的 router

实现前后端表单查询展示

1. table组件 ，及分页组件

2. 在export default{ method:{}}中定义翻页事件

3. 在export default{created(){}}方法中向服务器发送异步请求，将回调数据封装至export default{data(){return{}}} 中

4. 后端对findAll()方法传入 PageRequest 参数，将会返回分页查询数据

• 新概念
  • Vue 表单 :page-size(每页显示的行数) 与:total(总记录数) 属性结合，自动算出总页数，并实现分页逻辑
  • @click 点击事件，@current-change 翻页事件

实现添加数据功能

• 前端
  • :module 属性，绑定数据:rules 绑定校验规则

注意

1. export default{} 中调用函数常会用到this，是个未显示声明的隐示对象，默认指的是当前的Xxx.vue对象实例，但在回调函数中，this指的是包含回调函数的函数方法，注意区分

2. 重定向

   • router包下路由重定向 redirect:'跳转到的path名'

const routes = [
    {
        path: '/',
        name: '品牌管理',
        component:Index,
        redirect: '/brandManager',
		}]

- 具体页面绑定事件转发。在export default{}中的Method:[]中为事件绑定跳到具体页面 `_this.$router.push('/brandManager')`

- `router` 与`route` ，`router` 是所有Xxx.vue页面的路由调用者，可以用`$router.push()`进行页面跳转(path)，传参(query) 。`route` 是具体Xxx.vue对象，可以用`$route` 获取具体页面的属性，或者接收`$router` 传来的参数，调用this.$route.query.id