Day17(ElementUI、前后端代码分离)

yapi 插件问题

https://cloud.tencent.com/developer/article/1517980

浏览器插件不能使用问题

什么是vue?

vue是js体系,相当于jquery,jquery 操作dom元素,vue的设计模是mvvm,实质上是mvc加强版,vue最核心的是数据双向绑定。

读取vue数据:{{}}、v-model、:等等

使用vue有两种方式:

第一种传统方式:在js标签中导入vue.js,使用时 new vue({})

第二种方式:webpackage 分包模式 ,需要nodejs, npm install等

ElementUI介绍

https://element.eleme.cn/#/zh-CN/component/button

在这里插入图片描述

elementUI是饿了么团队开发的一款基于vue的前端组件库,提供了配套设计资源,帮助页面快速成型

elementUI 使用的vuejs语法+自定义组件库

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

elementUI布局器

http://lowcode.magicalcoder.com/magicaldrag/index-page.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9umaHBVh-1585105368099)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200323104753233.png)]

方法绑定加@符号

属性绑定加:符号

作业:批量删除测试

前后端分离

代码生成器

代码地址:

链接:https://pan.baidu.com/s/1kFUH4DDUmDbhKS-HkF71xw
提取码:5pol

1 、配置数据库

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5lDeX4gL-1585105368100)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200325090555360.png)]

2 、启动工程 访问 http://127.0.0.1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tT1N4b99-1585105368100)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200325090740927.png)]

3、选择表 生成了 zip 文件(我修改了下生成规则,加了时间戳和生成名字)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w4RVFzQa-1585105368100)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200325090907537.png)]

解压缩工具查看

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gnPqsNSA-1585105368101)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200325090929020.png)]

4 权限问题 menu.sql 按钮权限控制 (其实很多系统不需要细化到按钮权限控制)
在这里插入图片描述

说明:配置自己的数据库,准备好需要生成代码的数据库,然后把生成的代码导入到对应的前端工程和后端工程

前端工程

代码地址:

链接:https://pan.baidu.com/s/17-QgNWgkbm5YcMr3XkHZtQ
提取码:5idk

前端工程:renren-fast-vue-master(vue+elementui)

切换到项目文件夹下,使用管理员角色运行下面的命令

运行 cnpm install

运行 npm run dev

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rlVRoFKT-1585105368101)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200325092406898.png)]

把代码生成器生成的view文件夹下的文件拷贝到前端工程view文件夹下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSJiAOiX-1585105368102)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200325092825039.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YhFXgTmU-1585105368102)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200325092905112.png)]

后端工程

代码地址:

链接:https://pan.baidu.com/s/1-xqWcKByVQo8V64hGaJQSQ
提取码:rc6f

后端工程:renren-fast (springboot+mybatis-plus)

导入后端工程,修改数据库配置文件:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dEb2Pm41-1585105368102)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200325093220236.png)]

Docker 搭建数据库

docker run --name mysql3306 -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 -d

hub.c.163.com/library/mysql:5.7

新建数据库 renren_fast 导入系统提供 sql

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RcYB715e-1585105368103)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200325093353927.png)]

将代码生成器生成的代码,main文件夹拷贝到后端工程main文件夹中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y50EMKz4-1585105368103)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200325093721598.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aepbNvrq-1585105368103)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200325093817509.png)]

前端和后端端口调整

后端工程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9QtDSDYN-1585105368103)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200325094620235.png)]

前端工程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jvHnu12e-1585105368104)(C:\Users\wys\AppData\Roaming\Typora\typora-user-images\image-20200325094744035.png)]

发布了30 篇原创文章 · 获赞 0 · 访问量 706
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览