前端分离开发
- 一个功能就是一个接口,接口连接前后端
- 开发流程
- 需求分析
- 接口定义
- 前后端并行开发
- 测试
- 前后端联调测试
YApi
- 接口文档管理平台
- API接口管理
- Mock服务:模拟
- 此平台已停止维护,假装不需要接口管理
环境准备
- Vue脚手架
- Vue-cli是官方提供的一个脚手架,用于快速生成一个Vue的项目模板
- 功能:统一的目录结构,本地调试,热部署(应用程序代码变动后不需要再次运行),单元测试,集成打包上线
- 依赖环境:Node.js
- 配置prefix
-
C:\windows\system32>npm config set prefix "D:\code\tool\Node.js v14.19.1" C:\windows\system32>npm config get prefix D:\code\tool\Node.js v14.19.1
-
- 切换淘宝镜像
- 安装vue-cli
- npm install -g @vue/cli
- 确认是否安装成功:vue --version
- 这里由于之前安装了两个版本的node.js,而使用的nodejs和npm安装目录不是同一个而出现了错误,修改path环境变量为相应的node.js即可
创建Vue项目
命令行
vue create vue-project01
图形化界面
vue ui
- node_modules:存放项目依赖包
- public:存放项目的静态文件
- src:存放项目源代码
- asserts:静态资源
- compotents:可重用的组件
- router:路由配置
- views:视图组件(页面)
- App.vue:入口页面(根组件)
- main.js:入口js文件
- package.json:模块基本信息,项目开发所需要模块、版本信息
- vue.config.js:保存vue配置信息
启动Vue项目
- 图像化:npm点击运行(选中文件夹右键即可选择显示npm)
- 命令行:npm run serve
- 端口:8080
- 如果想修改端口号,可以在vue.config.js中添加相应语句:
Vue项目开发流程
- Vue项目默认首页:index.html
- 默认引入入口文件main.js:引入了很多公共组件如App.vue
- main.js:
-
import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')
- router:router简写为router,是因为属性值和属性名一致,可以省略
- render:将导入的视图创建DOM元素,然后挂载到app
-
- xxx.vue:组件文件
- 每一个组件都由三个部分组成
- 1.<template>模板部分,由它生成HTML代码
- 2.<script>控制模板的数据来源和行为
- 3.<style>CSS样式部分
- 每一个组件都由三个部分组成
- App.vue
-
<template> <div id="app"> <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </nav> <router-view/> </div> </template> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } nav { padding: 30px; } nav a { font-weight: bold; color: #2c3e50; } nav a.router-link-exact-active { color: #42b983; } </style>
-
<script> export default{ data(){ return{ message:"Hello" } } } </script>
-
Element
- 是一套基于Vue2.0的桌面端组件库
- 组件:组成网页的部件,如超链接、按钮等
- 官网:Element - 网站快速成型工具
- 作用:更好看,更省事
快速入门
- 安装ElementUI组件库(在当前工程的目录下),在命令行执行指令:
- npm install element-ui@2.15.3
- 先停止当前项目,在当前项目中,右键选择在集成终端中打开,然后输入指令,会存放在node.modules目录下
- 引入ElementUI组件库
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
- 在scr下的main.js入口文件中引入(可以在官网文档中查看引入方法)
- 访问官网,复制组件代码,进行调整
- 放在views路径下,可以创建一个element文件夹,存放相关组件(最好用驼峰命名,不然语法检查可能会报错)
- 在根组件中,使用<element-view>标签,即会自动导入
常见组件
crtl+alt+l/crtl+alt+f可以排列格式
- table表格
- 官网最下方有相应属性的介绍
- pagination分页组件
- events
- size-change:每页展示的记录数发生变化
- current-change:当前页变化
- events
- Dialog对话框组件
- visible.syn:控制显示隐藏
- Form表单组件
- 用于采集数据,由输入框、选择器等组成
- model,通过model绑定数据模型(需要在data中定义相关数据模型)
- 查看提交的数据:使用相关数据对象(转成字符串)
案例
- 步骤
- 创建页面,完成整体布局规划
- 布局中各个组件的实现
- 列表数据的异步加载,并渲染展示
- 使用标签引入组件,组件叫什么,标签就叫什么
- Container布局容器,方便快速进行页面布局
Axios异步加载
- 安装Axios
- 在项目目录下安装axios:
- npm install axios;
- 需要使用axios时,导入axios:
- import axios from 'axios';
- 在项目目录下安装axios:
- 在vue当中的钩子方法(如mounted)中发送异步请求
-
mounted(){ axios.get("......").then((result)=>{ this.tableData=result.data.data; }) }
-
- 插槽slot-scope
- scope.row.gender==1?'男':'女'
- 可以处理展示数据
Vue路由
前端路由:URL中hash(#号)与组件之间的对应关系
- Vue.Router
- 是Vue的官方路由
- 组成:
- VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件
- <router-link>:请求链接组件,浏览器会解析成<a>
- <router-view>:动态视图组件,用来渲染展示与路由路径对应的组件
- 安装
- 创建时已勾选
- npm install vue-router@3/5/1
- 定义路由
- src/router/index.js
- 创建时已勾选
- <router-link to="/dept">部分管理</router-link>:点击跳转到相关页面
- <router-view>:在App.vue中加上即可动态展示
- 配置默认路径(重定向)
-
{ path:'/', redirect:'dept' }
-
打包部署
打包
- 执行npm中的build脚本,会打包到dist文件夹
Nginx
- 轻量级Web服务器,占用内存少,并发能力强
- 官网:nginx news
- 视频提供1.22版本,我之前已经安装了1.24版本
- 相关目录文件解释
- conf:配置文件
- html:静态资源
- logs:日志
- temp:临时文件
- nginx.exe:用于启动
部署
- 直接crtl+c粘贴到相应文件夹,然后启动nginx后即可,默认占用80端口号
- 如果出错,可以根据日志文件查看具体问题
- 如端口被占用,可以查看当前占用端口号的进程,根据PID在任务管理器中查询
- 可以在配置文件中修改nginx的默认端口号