前后端分离开发
YApi
YApi是高效、易用、功能抢到的API管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务<https://yapi.pro/>
前端开发
- 模块化:JS、CSS
- 组件化:UI结构、样式、行为
- 规范化:目录结构、编码、接口
- 自动化:构建、部署、测试
环境准备
vue-cli是vue官方提供的一个脚手架,用于快速生成一个vue的项目模板。
Vue-cli提供了如下功能:
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境:NodeJs
vue项目创建流程
- 环境配置
- 随便在一个地方新建一个文件夹命名为“VUE”,打开cmd,输入`vue ui`
- 几个步骤,就照着图片上来就行了
- 项目目录结构
- 在vue.config.js中配置端口号
VUE项目开发流程
根HTML文件
Vue的组件文件都以`.vue`结尾,每个组件由三个部分组成:`<template>` `<script>` `<style>`
<!-- 模板部分,由它生成HTML代码 -->
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<!-- 控制末班的数据来源和行为(属性和函数) -->
<script>
export default{
// data:function(){
// return {
// message:"Hello vue"//数据模型
// }
// }
data(){
return{
message:"I don't like software"
}
},
methods:{
eat() {
console.log("eating!");
}
}
}
</script>
<!-- 控制CSS样式 -->
<style>
</style>
vue组件库Element
Element是一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。
组件:组成网页的部分,例如超链接、按钮、图片、表格、表单、分页条等。
官网:<https://element.eleme.cn/#/zh-CNListener>
快速入门
- 在vue项目上右击点击集成终端,在终端上输入`npm install element-ui@2.15.3`
- 引入ElementUI组件库,在main.js文件中加入以下代码,Element官网上也有,直接复制粘贴就完事儿了
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
- 在views文件夹下新建一个element文件夹下再新建一个ElementView.vue文件
文件大致内容如下:
<!-- 命名格式一定不能出错 -->
<template>
<div>
<!-- button 按钮 -->
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<!-- 从官网复制而来 -->
</div>
</template>
<script>
export default{
}
</script>
<style>
</style>
Element常见组件
表格
用于展示多条结构类似的数据,可以对数据进行排序、筛选、对比或其他自定义操作。
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
分页
Pagination:当数据量过多时,使用分页分解数据。
<div class="block">
<span class="demonstration">页数较少时的效果</span>
<el-pagination layout="prev, pager, next" :total="50"> </el-pagination>
</div>
<div class="block">
<span class="demonstration">大于 7 页时的效果</span>
<el-pagination layout="prev, pager, next" :total="1000"> </el-pagination>
</div>
</div>
属性和事件(部分)
属性名/事件名 | 描述 |
---|---|
background(属性) | 分页按钮的背景颜色 |
layout(属性) | 布局可以设置total,sizes,prev,pager,next,jumper,自己试 |
size-change | pageSize(每页的大小)改变时会触发,接受每页条数为参数 |
current-change | currentPage改变时会触发,接受当前页为回调参数 |
对话框
Dialog在保留当前页面状态的情况下,告知用户并承载相关操作。
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column
property="date"
label="日期"
width="150"
></el-table-column>
<el-table-column
property="name"
label="姓名"
width="200"
></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
<!-- Form -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
表单组件
Form由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column
property="date"
label="日期"
width="150"
></el-table-column>
<el-table-column
property="name"
label="姓名"
width="200"
></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
Vue路由
前端路由:URL中的hash(#号)与组件之间的对应关系。
Vue Router是vue官方的路由
组成:
- VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件
- `<router-link>`请求链接组件,浏览器会解析成`<a>`
- `<router-view>`动态视图组件,用来渲染展示与路由路径对应的组件
- - 安装(创建vue项目时已选择)或者`npm install vue-router@3.5.1`
- - 定义路由(在router文件夹里的index.js文件中)
打包部署
打包之后会形成一个dist文件夹用于部署到服务器中
Nginx:是一款轻量级的web服务器/反向代理服务器及电子邮箱代理服务器。其特点是占有内存少, 并发能力强,在各大型互联网公司都有非常广泛的使用.
官网:<https://nginx.org/>
如果在任务管理器中发现nginx没有正在运行则说明默认的80端口正在被占用,可以修改conf文件夹中的nginx.conf文件的端口号
访问时通过浏览器输入`https://localhost/端口号`