vue实战2：

xiao52x

已于 2022-05-02 15:48:01 修改

阅读量2.4k

点赞数 1

分类专栏：前端文章标签： javascript

于 2022-04-27 22:45:14 首次发布

本文链接：https://blog.csdn.net/weixin_44953928/article/details/124458528

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

一、后台环境初配置
二、前端
三、总结遇到的问题

一、后台环境初配置

在这里插入图片描述

# 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 标红
在这里插入图片描述

xiao52x

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
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 完成提交和重置二、前端1.配置环境步骤1.到保存地址，创建vue ui然后用IDea打开我们的文件夹2、解析代码，简化（1）介绍main.js1.这里是通过组件App.vue把它渲染在了 public下的index.html2.在确定i
复制链接

扫一扫