vue实战2：

文章目录

二、前端
- 1.配置环境步骤
- 2、解析代码，简化
- - （1）介绍main.js
  - （2）清洁框架
- 3.创建组件
- - 3.1床架login.vue组件
  - - 3.1.1 iconfont的引入
    - 3.1.2 添加样式
    - 3.1.3 校验规则
    - 3.1.4 完成提交和重置
- 3.2后端（后台开发）
- - 3.2.1、创建user实体
  - 3.2.2、创建登陆，连接前后端
  - 3.2.3：后端连接数据库(编写usermapper) （可以连接数据库页面跳转了）
  - 3.2.4 JSON的引入（这里可以跟数据对接了，正确就跳转，密码错误就登陆失败）
  - 3.2.5（前端）安全退出
  - 3.2.6（前端）安全与路由
- 3.3 home主页的改造
- - 3.3.1 布局和header
  - 3.3.2 侧边栏的绘制
  - 3.3.3 侧边栏的绘制（后端数据引入）
三、总结遇到的问题

二、前端 1.配置环境步骤

1.到保存地址，创建

vue ui

然后用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);
}







    
        SELECT count(id) FROM easyuser
        WHERe username=#{username} AND password=#{password} AND state=1

3.2.4 JSON的引入（这里可以跟数据对接了，正确就跳转，密码错误就登陆失败）

1.首先在pom.xml引入

 		
            com.alibaba
            fastjson
            1.1.23

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

三、总结遇到的问题

1.pom.xml文件中spring-boot-maven-plugin 标红

vue实战2：

Java相关栏目本月热门文章