杭州上城区建设局网站,旅游品牌推广方案,给网站开发自己的一封信,天津建站模板源码Vue3的使用
一、首页案例修改 修改首页的信息#xff1a;是在之前介绍的HelloWorld.vue文件中进行内容的修改。 页面展示效果#xff1a; 此时就看到了我们新添加的文字了#xff01; 同样的我们开发代码的时候只需要修改了项目中的内容然后保存就会自动刷新的浏览器是在之前介绍的HelloWorld.vue文件中进行内容的修改。 页面展示效果 此时就看到了我们新添加的文字了 同样的我们开发代码的时候只需要修改了项目中的内容然后保存就会自动刷新的浏览器不需要我们主动去刷新浏览器了。
1.1 配置自己的路由 首先创建template自定义组件模板 在 src / components 文件夹下我们自定义创建定义模板.vue文件。然后将创建好的 ‘ template ’ 模板使用‘ script ’进行导出 将template模板信息导入到index.js文件中配置路由信息
将我们上一步构建的两个template 组件模板导入到 src / router / index.js 文件中配置对应的路由信息。 **注**在导入我们自定义的 组件模板component/template时项目可能会产生许多错误的语法提示这时候我们需要对配置文件中的语法严格检测关闭掉build / webpack.base.conf.js 文件。 将配置好的路由router 引入到src / App.vue 界面中即可 主页面效果展示 二、 Axios基本使用
在 Vue 里面提供有标准的数据异步访问处理机制这种操作主要是通过 axios 组件来完成的这个组件是进行异步数据操作使用的比如要从后端获取数据如果没有异步处理的操作支持那么 Vue 存在就没有任何的价值。
Axios文档https://www.axios-http.cn
2.1 下载Axios开发包 在项目中安装 npm install axios -s 这里需要注意一下axios的版本兼容问题。后续我更改了版本 npm install axios0.26.0 -s
通过该命令安装之后可以通过 package.json 文件中查询出对应的安装数据 npm install 命令介绍 npm install XXX -s npm install xxx -s 相当于 npm install -S 相当于 npm install --saver 这样安装是局部安装的的只是在当前项目中能使用会写进 package.json 文件中的dependencie 里。 dependencie表示生成环境下的依赖管理。 也就是说需要安装一个库如果是用来构建你的项目的比如 echarts、element-ui 等是实际在项目中起到作用的就可以使用 -s 来安装。 npm install xxx -d npm install xx -d 相当于 npm install -D 相当于 npm install --save-dev 这样安装是局部安装的会写进 package.json 文件中的 devDependencies 项中。 devDependencies表示开发环境下的依赖管理 如果你安装的库是用来打包的、解析代码的就可以用 -d 来安装项目上线了这些库就没用了。 npm install xxx -g npm install xxx -g 表示全局安装安装一次之后你就可以在其他任何地方直接进行使用了。 npm install xxx 在什么参数都不添加的时候 和 npm install --saver 一样的都是局部安装并会把模快自动写入package.json文件中的 dependencies 中。 配置Axios
在开发环境中安装好Axios后想要使用则必须还要在 main.js文件中进行相应的配置 2.2 静态文件的读取演示 静态文件封装 为了方便进行数据的访问本次在 static 目录下面创建一个“dept.json”文件使用该文件来模拟后端数据。 加载静态文件创建对应的组件模快 .vue文件 本次将在 deptList.vue(创建在 src / components 文件下的组件模快) 程序里面实现异步数据的加载操作加载完成的数据要以表格的形式显示。 组件模快方式一 templatedivh1 classtext-color【路由页面】部门信息列表1/h1button clickloadDeptDate加载部门信息/buttondiv classdiv-floattable border1theadth部门编号/thth部门名称/thth部门地址/th/theadtbodytr v-fordept in deptstd{{dept.deptno}}/tdtd{{dept.dname}}/tdtd{{dept.loc}}/td/tr/tbody/table/div/div
/template
script
export default {name:DeptList,data(){return{depts:[] // 返回json格式数据}},methods:{loadDeptDate(){ //部门信息加载函数let self this; //在回调函数中不能直接调用 this 这里需要先声明出来//发送异步请求this.$axios.get(/static/dept.json).then(function(resp){ //请求成功就执行then里面的内容alert(请求状态码resp.status)self.depts resp.data}).catch(function(error){ //请求失败的回调函数alert(请求失败console.error)}) }}
}
/script组件模快方式二 templatedivh1[部门信息列表加载]方式2/h1table border1 aligncentertheadth部门序号/thth部门编号/thth部门名称/thth部门地址/th/theadtbodytr v-for(dept,index) in deptstd{{index1}}/tdtd{{dept.deptno}}/tdtd{{dept.dname}}/tdtd{{dept.loc}}/td/tr/tbody/table/div
/template
script
export default {name:DeptList2,data(){return{depts:[]}},created(){this.loadDeptData();},methods:{loadDeptData(){let self this;//发送请求加载数据this.$axios.get(/static/dept.json).then(function(resp){alert(组件模板2请求数据成功)self.depts resp.data})}}
}
/script配置组件模快的路由信息 在src / router /index.js 文件中将我们创建好的 组件模快.vue文件 导入并配置相关路由信息。 import Vue from vue
import Router from vue-router
import HelloWorld from /components/HelloWorld
import testVue from /components/testVue
import testCamunda from /components/testCamunda
//导入组件模板数据进行封装
import deptList from /components/DeptList
import deptList2 from /components/DeptList2
Vue.use(Router)
export default new Router({routes: [{path: /,name: HelloWorld,component: HelloWorld},// 配置自定义路由{path:/testVue,name:VueImages,component:testVue},{path:/testCamunda,name:CamundaImageTest,component:testCamunda},//配置部门数据组件模板路由信息{path:/deptList1,name:deptList1,component:deptList},{path:/deptList2,name:deptList2,component:deptList2}]
})引用封装好的路由 在 src / App.vue 中引入刚才封装好的 部门信息路由即可在主页看见效果。 首页效果展示
三、基于代理实现跨域访问
vue 的最大的优势之一就是实现前后端分离之前传统的开发是前端代码和后端代码都是写在一起的现在我们要将前端代码写在前端的项目中后端的代码专门负责业务处理提供接口给前端项目调用即可。
在整个的Vue项目里面最为重要的特点就是方便的支持有跨域访问的操作处理它可以通过一个 WebPack 简单配置实现数据的跨域访问操作如果使用的是SpringBoot在现代跨域访问上的支持很到位不需要做任何的配置)
3.1 后端实现统一返回值
特别注意一个项目中有很多的 controllercontroller 中有很多方法这些方法要有返回值一个项目中的 controller 的返回值有很多此时和前端开发人员去对对接的时候就非常苦难此时就应该一个项目中的所有返回值都统一为一种就要定义一种专门封装返回给前端的数据的类型 R。
package cn.example.springbootproject.tempTestVue;
import lombok.Data;
import lombok.experimental.Accessors;
import javax.xml.transform.Result;
import java.util.HashMap;
import java.util.Map;/*** Description: 实现统一返回数据* ClassName: R*/
Data
/** chain:支持链式编程 fluent忽略get/set前缀 */
Accessors(chain true)
public class R {private Boolean success;private Boolean error;/**响应提示信息*/private String message;/**相应状态码*/private Integer code;/**保存返回数据的对象*/private Map date new HashMapString,Object();/**请求成功*/private static R ok(){R r new R();r.success(true);r.message(ResultCodeEnum.SUCCESS.getMessage());r.code(ResultCodeEnum.SUCCESS.getCode());return r;}/**请求失败*/private static R error(){R r new R();r.error(false);r.code(ResultCodeEnum.FAIL.getCode());r.message(ResultCodeEnum.FAIL.getMessage());return r;}/**返回数据对象赋值接口*/public R data(String key,Object value){this.date.put(key,value);return this;}public R data(MapString,Object map){this.date(map);return this;}
}3.2 后端控制层查询封装
在后端写好查询数据的接口然后通过我们的Vue项目对端口的调用获取到后端查询到的数据之后对获取到的数据进行渲染操作。
package cn.example.springbootproject.tempTestVue;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList;
import java.util.HashMap;/*** Description: 雇员查询控制层* ClassName: EmplyeeController*/
Controller
RequestMapping(/employee)
public class EmplyeeController {GetMapping(queryList)public R queryList(){//这里就简单的封装一个模拟数据了不在调用Service层在进行数据的查询ArrayListObject employeeList new ArrayList();for (int i 0; i 5 ;i) {HashMapString, Object employee new HashMap();employee.put(id,i);employee.put(name,张三i);employee.put(age,20i);employee.put(sex,男);employee.put(address,北京市朝阳区i);employee.put(salary,10000i);employeeList.add(employee);}return R.ok().data(list,employeeList);}
}
3.3 vue项目中追加代理
在vue项目中进行代码配置 修改 config /index.js 文件中的proxyTable中追加代理控制。 该文件是配置文件修改之后需要重启项目才能生效
3.4 修改组件模板文章中的Axios代码
在对应的组件模板中将对应数据获取后赋值给vue对象然后在对应的 template 模板中进行赋值遍历预览即可。
templatedivh1[部门信息列表加载]方式2/h1table border1 aligncentertheadth序号/thth编号/thth名字/thth年龄/thth性别/thth工资/thth地址/th/theadtbodytr v-for(dept,index) in deptstd{{index1}}/tdtd{{}index.id}/tdtd{{dept.name}}/tdtd{{dept.age}}/tdtd{{dept.sex}}/tdtd{{dept.salary}}/tdtd{{dept.address}}/td/tr/tbody/table/div
/template
script
export default {name:DeptList2,data(){return{depts:[]}},created(){this.loadDeptData();},methods:{loadDeptData(){console.log(访问后端查询数据)let self this;//发送请求加载数据 //this.$axios.get(/static/dept.json)this.$axios.get(/api/employee/queryList).then(function(resp){console.log(组件模板2请求数据成功resp.data.data.list)self.depts resp.data.data.list}).catch(function(error){ //请求失败的回调函数alert(请求失败error)})}}
}
/script效果展示
四、Axios工具类的封装
项目中用到了 axios但是不得不说在项目直接使用 axios 实在是繁琐你现在感觉不繁琐是因为业务简单每次都要写一堆的配置而且将配置写在业务代码中十分地不雅一般在项目中使用的时候都会将其再次封装以便更好的使用比如统一数据处理和错误信息等操作。
4.1 定义request.js文件
需要在项目的 src 目录下创建一个 utils 的目录然后在里面创建一个叫做 request.js 的文件。
//这是一个异步访问工具文件
import axios from axios
import config from ../../config
//创建一个axios实例
const service axios.create({//指定需要访问的基础路径就是要访问的后端路径baseURL:http://localhost:8888,timeout:3000 //请求超时时间
})
//请求拦截器的封装
service.interceptors.request.use(// 这里的config是浏览器发送的请求的所以信息都封装在这里面config {//添加请求头信息config.headers[token]token123return config},err {// Promise 是se6中新增加的一个对象暂时不用管return Promise.reject(err)}
)
//响应拦截器(后端响应数据在渲染到前端之前会在此拦截器处理)
service.interceptors.response.use(//后端响应的信息都封装到该对象中response{if(response.data.code20001){//表示没有权限window.location.href/loginreturn;}if(response.data.code20002){//表示账号被锁定alert(你的账号已别锁定请连续客户处理)return;}if(response.data.code20003){//表示登录凭证过期alert(response.data.message);return;}//放行return response; },error{return Promise.reject(error.response)}
)
export default service;4.2 单独定义js发送请求
定义一个独立的js文件专门用于发送axios异步请求就该js文件放在 src / api 文件夹下命名为emp.js。
//导入封装好的 axios实例
import request from /utils/request
import { methods } from http-parser-js//创建发送axios异步请求的方法
export default{//发送请求的方法empList(cp,ls){//使用定义的工具访问后端代码return request({url:employee/queryList,methods:post})}
}4.3 修改组件模块数据发送请求
在之前创建的 src / components /deptList2.vue 文件中调用api接口发送异步请求获取数据。 这里可能会出现一个异常信息 解决办法这里需要后端开启跨域访问即可 查询成功 五、UI框架 element-ui
市面上常用的ui框架包含 Bootstrap Layui easyui界面很丑 element-ui兼容了vue ui框架PC端 bootstrap比较强大的一款前端 ui 框架存在的时间也比较久但是依赖于 jQuery不符合vue 的开发思想不建议用layui经典的模块化前端框架虽然使用时不需要引入 jQuery但是底层是依赖于 jQuery 的并且非常依赖于 dom 操作不建议使用iview一套基于 Vue.js 的高质量 UI 组件库。对 vue 兼容性极强功能强大组件丰富推荐。ant-design-vue这是蚂蚁金服的开源 ui 框架。大名鼎鼎的 jeecg 就是使用的这个完美兼容vueelementui目前 vue 开发者使用最多的 ui 框架饿了么团队开发阿里完美兼容 vu ui 框架 移动端 muiDCloud 出品的 ui 框架可以实现半原生开发。曾经依赖于 jQuerymintui饿了么团队出品的移动端 ui 框架兼容 vue但是不太关注功能较少antui蚂蚁金服移动端 ui 框架完美兼容 vue封装不太好vant有赞出品的前端 ui 框架完美兼容 vu
5.1 Elementui的简单使用
接着我们通过 vue-cli 脚手架创建的项目进行练习
element-ui 官网地址https://element.eleme.cn/#/zh-CN/component/installation
分析一下目录结构 在项目中安装 element-ui
执行命令 npm install element-ui -s 下载某个包并把该包的信息记录到生产环境依赖中dependencies。需要注意的是-S 是大写的等 价于小写开头的–save这里可是 2 个 - 。
下载完毕之后可以通过依赖配置文件中观察到我们刚下载好的依赖信息 在main.js 主js文件中全局引入 element-ui 依赖 然后启动项目 npm run dev 到现在为止 我们的该项目就支持 element-ui 开发了
5.2 树形结构的开发
大部分的开发需求中 都基本上是采用该步骤进行开发首先是创建我们的 组件模板 并将组件(.vue文件) 存放在目录 src / views 下。
通过element-ui官网查询需要的树形结构ui模型。
然后在通过 router / index.js 文件中为组件模板配置路由信息配置好路由信息之后就可以对配置好的路由进行调用了。 创建 views /Tree.vue 组件模板文件 这里的views文件夹是新建的文件夹专门用来存放我们创建的 组件模板 .vue 文件。或者我们可以直接保存在项目中原本就有的 components 文件夹中。 这里需要注意 将element-ui 官网的ui模型代码复制过来后组件部分我们需要创建 template 标签将其包裹住同时 template 标签下只能存在一个根节点标签所这里使用了 : template divxxxxx/div /template 两重标签将我们的ui模型 数据进行包裹 修改路由配置文件 router / index.js 创建好组件模板 Tree.vue 文件之后 我们在对该文件配置路由信息。 这里的 component 组件属性在导入组件时与之前发生了改变这里是直接导入了我们的组件文件。后续这种方式比较常用 之前导入组件模快的方式是首先在顶部通过 improt 导入组件对应名称之后然后才在下面的路由配置信息中的component属性上直接引用上方导入的组件信息即可。 树形结构的引用App.vue中 在配置好树形组件的路由信息之后 通过App.vue 来引用我们配置好的树形结构路由即可。
主页面展示效果图
5.3 消息弹框UI
当用户在页面点击按钮操作数据的时候如果成功需要给个提示失败也需要给提示element-ui 中有很友好的提示方式。
同样是通过Element-ui官网选择一个比较合适的UI组件模快然后复制到我们新建的组件模快 .vue文件中这里还是需要注意需要用 template 标签将 其余el标签全部包裹起来且template标签下只能有一个根节点。
创建 views / Notice.vue 组件模板文件 修改router / index.js 文件中的路由配置信息 修改App.vue文件调用封装好的路由 展示效果 5.4 表单UI
表单是在开发中必不可少的组件element-ui 中对表单也很好的支持很轻松就能实现。 创建 view / Form.vue 首先同样的方式我们去 element-ui 官方连接中去找一个比较适合的 UI 界面然后复制 表单 UI 的代码整合到我们的项目中来 **注**还是需要注意的是复制过来的所以el标签需要保存在 template标签下且一个根标签中 添加 router / index.js 中路由的配置信息 修改 App.vue 调用表单路由信息
展示效果 5.5 弹层Dialog对话框
在保留当前页面状态的情况下告知用户并承载相关操作。这里的弹层就是之前说的模态窗口在 BootStrap 创建 src / view /Dialog.vue 这里同样是去饿了么官网查找对应的ui界面然后复制源码。 templateel-button typetext clickopen点击打开 Message Box/el-button
/template
scriptexport default {methods: {open() {this.$confirm(此操作将永久删除该文件, 是否继续?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.$message({type: success,message: 删除成功!});}).catch(() {this.$message({type: info,message: 已取消删除}); });}}}
/script在router / index.js 文件中配置Dialog的路由信息 routes: [//Dialog{path:/Dialog,name:Dialog弹窗,component:() import(../views/Dialog.vue)}]在 App.vue 界面调用Dialog.vue 的路由配置信息 router-link to/Dialogelement-Dialog弹窗确认/router-link展示效果
5.6 表格UI 创建 src / vuews / Table.vue 从element-ui官网下选择了这款UI表格然后复制源码复制到创建的 Table.vue中。 修改 src / router /index.js 文件配置路由信息 //tableUi
{path:/Table,name:table表格UI,component:() import(../views/Table.vue)
} 在 App.vue 中调用配置好的路由信息 router-link to/Tableelement-ui表格UI/router-link
这里可能会出现表格无法展示问题。解决办法是降低我们element-ui的版本。
npm install element-ui2.8.1 -s
页面展示效果
