文章目录
一、后台环境初配置
# mysql
spring:
datasource:
#MySQL配置
driverClassName: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/testblog?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC
username: root
password: 123456
mybatis:
mapper-locations: classpath:mapper/*.xml
type-aliases-package: com.example.demo.model
server:
port: 9000
- 测试端口
- 处理跨域问题
package com.urlhouduan.houduan.util;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
//处理跨域
//全局配置
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
/**
* 1.访问枯井
* 2.请求来源
* 3.方法
* 4.响应时间
* 5.允许携带
*/
registry.addMapping("/**")
.allowedOrigins("http://localhost:8080", "null")
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") //方法
.maxAge(3600) //最大响应时间
.allowCredentials(true);
}
}
二、前端
1.配置环境步骤
- 1.到保存地址,创建
vue ui
Choose a version of Vue.js that you want to start the project with:
你想用Vue的那个版本,这个就看大家的需求了(在这里我选择的是Vue2)
Use history mode for router? :就默认让它关闭就可以
Pick a linter / formatter config::代码的书写风格(我们建议选择第三个。 ESLint + Standard config)
Pick additional lint features: 一般不用管(或者两个都选择,看个人情况吧)
点击创建项目
然后用IDea打开我们的文件夹
2、解析代码,简化
(1)介绍main.js
- 1.这里是通过组件App.vue把它渲染在了 public下的index.html
- 2.在确定import ‘./plugins/element.js’ 是否引入即可
(2)清洁框架
- 1.清洁 App.vue,
一个项目中只有一个id叫做app
- 2.删除src文件下的view文件下的东西,然后再把路由 router对应的indexjs,相对应的引入删除
- 3.这出现代表删除完毕
3.创建组件
- 1.创建组件基本框架
- 2.在router路由文件下的 index引入(配置路由)
- 3.然后 在App.vue中来渲染,路由过来的所以用这个
3.1床架login.vue组件
- 1.首先设计组件,Login.vue,
- 2.添加全局样式,在assets文件中,创建css文件夹,在创建global.css
- 3.在 main.js 中添加全局样式 import ‘./assets/css/global.css’
3.1.1 iconfont的引入
- 1.阿里https://www.iconfont.cn/,找到自己用的下载,解压,假如到 assets中
- 2.在 main.js 中添加全局样式
- 3.在Login组件中进行修改
3.1.2 添加样式
- 对Login.vue中的 一对style进行设计
3.1.3 校验规则
Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
- 添加校验属性
2.编写校验规则
3.校验元素对应绑定
3.1.4 完成提交和重置
1.现在main.js 中引入axios
2.密码框隐藏密码
3.在Login.vue中对按钮进行设计添加@click绑定对应的方法
4.Login.vue中添加对应的方法
5.创建跳转到home网页的home的组件Home.vue
6.记得在路由中router文件夹下的index.js中添加Home.vue
3.2后端(后台开发)
1.创建user实体
2.创建userdao
3、编写usermapper
3.2.1、创建user实体
1.要与数据库的顺序相同
2. alt+insert 键,constructor
3. alt+insert 键,constructor,多选可以按着ctrl 选择需要生成的变量
4.alt+insert 键,get
5.alt+insert 键,set
6. 重写tostring
3.2.2、创建登陆,连接前后端
- 后端,
- 前端
3.2.3:后端连接数据库(编写usermapper) (可以连接数据库页面跳转了)
1.创建dao文件夹,具体见图,在创建UserDao接口
2.再在mapper文件夹下创建UserMapping.xml (里面包括数据库查询语句)
3.在LoginController.java中导入这个UserDao接口
4.不用扫描,直接在UserDao接口上加@Mapper就好了或者是UrljavaApplication。java中扫描这个dao
package com.xiao.urljava.dao;
import com.xiao.urljava.bean.User;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
@Repository
public interface UserDao {
// 用户名,密码
public User getUserByMassage(@Param("username") String username, @Param("password") String password);
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--namespace=对应dao的路径-->
<mapper namespace="com.xiao.urljava.dao.UserDao">
<!-- resultType是bean文件夹下ueser的对象-->
<select id="getUserByMassage" resultType="com.xiao.urljava.bean.User">
SELECT count(id) FROM easyuser
WHERE username=#{username} AND password=#{password} AND state=1
</select>
</mapper>
3.2.4 JSON的引入(这里可以跟数据对接了,正确就跳转,密码错误就登陆失败)
1.首先在pom.xml引入
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.1.23</version>
</dependency>
2.在里面修改配置
3.再把前端对应的界面改了
- 前端
3.2.5(前端)安全退出
- 1.先设置一个安全退出按钮
1.在前端组件Login的登陆中 存储对象
3.2.6(前端)安全与路由
2.对跳转到界面的Hone.vue组件,添加一个安全推出的按钮
- 2.安全路由(在路由index.js添加)
// 出现问题的时候使用
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
3.3 home主页的改造
3.3.1 布局和header
1.开发hone.vue组件
2.
3.3.2 侧边栏的绘制
3.3.3 侧边栏的绘制(后端数据引入)
1.第一步创建实体bean文件下的SubMenu.java
2.再创建一个实体MainMenu.java
3.再创建dao文件下的里面的接口MenuDao
4.然后在编写他对应的文件,在mapper文件下MenuMapping.xml
5.在Controller文件夹下创建 MenuController.java
3.3.4(前端)侧边数据引入以及加入伸缩
-
侧边数据引入
-
加入伸缩
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
//头部样式
.el-header {
background-color: #373d41;
display: flex; //
justify-content: space-between;// 左右贴边
padding-left: 0%;// 左边界
align-items: center;// 水平
color: #fff; //字体纯白
font-size: 20px; //字体大小
> div { //左侧div加布局
display: flex;
align-items: center;
span {
margin-left: 15px;
}
}
}
//侧边栏样式
.el-aside {
background-color: #333744;
.el-menu{
border-right: none;// 对其右边框
}
}
//主体样式
.el-main {
background-color: #eaedf1;
}
//布局器样式
.home-container {
height: 100%;
}
//图片样式
img {
width: 50px;
height: 50px;
}
//按钮样式
.toggle-button{
background-color:#4A5064;
font-size: 10px; //字体
line-height: 24px; //
color:#fff;
text-align: center;
letter-spacing: 0.2em;
cursor: pointer;// 显示鼠标指针为:小手
}
.iconfont{
margin-right: 10px;
}
</style>
3.3.5(前端)主体部分展示(main区域重定向)
1。现在要展示的页面这里上路由占位符:
2.首先创建组件Welcome.vue
2.然后再路由中添加index.js中加入Welcome.vue
3.3.6(前端)侧边导航main区域路由
1.加一个router属性
2.创建一个admin对应的组件
3.在路由页面index。js添加这个组件
3.3.7(前端)路径保存
1.存在的问题,刷新后不在高亮
2.首先给一个默认选择的属性,创造这个属性
3.4 用户列表组件开发(前端)
3.4.1 面包屑导航
<!-- 面包屑导航 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>权限管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<style lang="less" scoped>
/*卡片区的样式*/
.el-breadcrumb{
margin-bottom:15px;
font-size: 17px;
}
</style>
3.4.2 卡片视图区
<!-- 卡片视图区 -->
<el-card>
</el-card>
//卡片区域
.el-card{
box-shadow: 0 1px 1px rgba(0,8,10,0.15) !important;
}
3.5用户数据获取
3.5.1前台组件
3.5.2(后端,重点)dao层实现,controller实现
1.uerDao的内容添加
3.5.3 前后端展示
3.5.4(前端)用户列表渲染
-
步骤1
-
步骤2:添加功能
-
-
步骤3:自定义操作
3.5.5(前端)分页功能
3.6 修改用户状态
3.6.1 后端
1.先对userDao进行添加
2.在对mapper里面的userMaping进行添加
3.再对UserController进行添加
3.6.2 前端
3.7 搜索和添加按钮
3.7.1 搜索
1.因为前面数据库已经把搜索内容写好
2.添加前端
- 后端
- 前端
3.7.2 添加用户按钮
3.7.2.1 后端
老规矩
1.先userDao再对应的映射mapper\UserMapping.xml,最后com.urlhouduan.houduan.controller.UserController
- 这里出问题
3.7.2.1 前端
3.8 删除按钮
3.8.1 后端
先userDao再对应的映射mapper\UserMapping.xml,最后com.urlhouduan.houduan.controller.UserController
3.8.2 前端
3.9 修改按钮
3.9.1 后端
先userDao再对应的映射mapper\UserMapping.xml,最后com.urlhouduan.houduan.controller.UserController
3.9.2 前端
三、总结遇到的问题
1.pom.xml文件中spring-boot-maven-plugin 标红