怎么在自己的网站做淘宝客,交互式英语网站的构建,前端做用vue做后台多还是做网站多,下载168网站步骤#xff1a;
1、项目准备#xff1a;新建项目#xff0c;并删除自带demo程序#xff0c;修改application.properties.
2、使用Apifox准备好json数据的mock地址
3、编写基于vue的静态页面
4、运行
整个的目录结构如下#xff1a; 0、项目准备
新建项目#xff0…步骤
1、项目准备新建项目并删除自带demo程序修改application.properties.
2、使用Apifox准备好json数据的mock地址
3、编写基于vue的静态页面
4、运行
整个的目录结构如下 0、项目准备
新建项目并删除自带demo程序修改application.properties. 必须配置注意必须修改为自己的数据库名称以及数据库连接的账号密码。 # 应用服务 WEB 访问端口
server.port8080
#下面这些内容是为了让MyBatis映射
#指定Mybatis的Mapper文件
mybatis.mapper-locationsclasspath:mappers/*xml
#指定Mybatis的实体目录
mybatis.type-aliases-packagecom.example.mybatis.entity#数据库连接
spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver
spring.datasource.urljdbc:mysql://localhost:3306/heima
spring.datasource.usernameroot
spring.datasource.password123
#开启mybatis的日志输出
mybatis.configuration.logimplorg.apache.ibatis.logging.stdout.StdOutImpl
#开启数据库表字段
#实体类属性的驼峰映射
mybatis.configuration.map-underscore-to-camel-casetrue
一、使用Apifox准备好json数据的mock地址
1、登录网页版Apifox
Apifox - API 文档、调试、Mock、测试一体化协作平台。拥有接口文档管理、接口调试、Mock、自动化测试等功能接口开发、测试、联调效率提升 10 倍。最好用的接口文档管理工具接口自动化测试工具。Apifox Postman Swagger Mock JMeter。集接口文档工具、接口Mock工具、接口自动化测试工具、接口调试工具于一体提升 10 倍研发效率。是最好用的API文档工具API自动化测试工具API Mock工具接口文档管理工具接口文档生成工具。https://apifox.com/2、在Apifox中新建项目新建接口以及设置地址、请求和响应参数等。
没有特别合适的视频教程可以参考从10:53开始看理解大概的原理。具体操作参照截图所示。Day03-03. 前端工程化_哔哩哔哩_bilibili
根据contrller文件中的访问地址设置apifox的访问地址。 点击“快捷请求”会出现测试数据。这个云端地址就是我们前端页面要使用的mock地址。 mock地址的json数据测试成功。
{code: 1,msg: success,data: [{id: 1,author: 陶渊明,gender: 1,dynasty: 东晋末至南朝宋初期,title: 诗人和辞赋家,style: 古今隐逸诗人之宗},{id: 3,author: 李商隐,gender: 2,dynasty: 唐代,title: 诗坛鬼才,style: 无},{id: 4,author: 李白,gender: 1,dynasty: 唐代,title: 诗仙,style: 豪放飘逸的诗风和丰富的想象力},{id: 5,author: 李清照,gender: 2,dynasty: 宋代,title: 女词人,style: 婉约风格},{id: 6,author: 杜甫,gender: 1,dynasty: 唐代,title: 诗圣,style: 反映社会现实和人民疾苦},{id: 7,author: 苏轼,gender: 1,dynasty: 北宋,title: 文学家、书画家诗神,style: 清新豪健的诗风和独特的艺术表现力},{id: 9,author: 王维,gender: 1,dynasty: 11,title: 11,style: 11},{id: 12,author: 王维,gender: 0,dynasty: 唐代11,title: 诗佛11,style: 空灵、寂静11},{id: 13,author: 2221111,gender: 22,dynasty: 22,title: 22,style: 22},{id: 14,author: 王维,gender: 1,dynasty: 唐代,title: 诗佛,style: 空灵、寂静},{id: 17,author: 0000,gender: 1,dynasty: 0000,title: 000,style: 000},{id: 18,author: 热帖,gender: 0,dynasty: 特瑞,title: 特热,style: 天热},{id: 19,author: 热帖,gender: 0,dynasty: 特瑞,title: 特热,style: 天热},{id: 20,author: 热舞,gender: 0,dynasty: 问题,title: 特,style: 他},{id: 21,author: 111,gender: 1,dynasty: 11111,title: 11111,style: 1111},{id: 22,author: 3333,gender: 0,dynasty: 333,title: 33,style: 33}]
}
二、编写基于vue的静态页面
2.1 拷贝axios和vue的被包含文件
2.2 编写html文件 编写vue页面将异步请求的地址编写为刚刚测试成功的mock地址。 这两个包含文件拷贝进去即可。
peot_list_nofenye.html的代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title诗人信息/title
/headscript src./js/vue.js/script
script src./js/axios-0.18.0.js/scriptbodyh1 aligncenter诗人信息列表展示/h1div idapp aligncentertable border1 cellspacing0 width60%trth序号/thth姓名/thth性别/thth朝代/thth头衔/thth风格/thth操作/th/trtr aligncenter v-for(peot,index) in tableDatatd{{peot.id}}/tdtd{{peot.author}}/tdtd{{peot.gender}}/tdtd{{peot.dynasty}}/tdtd{{peot.title}}/tdtd{{peot.style}}/tdtd classtext-center!--a :hrefpeot_edit.html?idpeot.id--!--button typebutton clickdeleteId(peot.id)--修改删除/td/tr/table
/div
/bodyscriptnew Vue({el: #app,data() {return {tableData: []}},mounted(){//peotfindAllaxios.get(https://mock.apifox.com/m1/3761592-3393136-default/peotfindAll?apifoxApiId171587808).then(res{if(res.data.code){this.tableData res.data.data;}});},});
/script
/html三、运行 3.1 启动项目 3.2 地址栏访问 http://localhost:8080/peot_list_nofenye.html
