Vue结合Springboot实现用户列表单页面(前后端分离)

目录
  • 用户列表页面开发
    • 项目介绍
  • 1、前端html页面编写
  • 2、springboot框架搭建
    • 2.1、项目创建
    • 2.2、连接数据库
    • 2.3、项目完整依赖
  • 3、编写entity层
  • 4、查询用户信息
    • 4.1、后端代码编写
    • 4.2、前端代码编写
  • 5、添加用户信息
    • 5.1、后端代码编写
    • 5.2、前端代码编写
  • 6、修改用户信息
    • 6.1、后端代码
    • 6.2、前端代码
  • 7、删除用户信息
    • 7.1、后端代码
    • 7.2、前端代码

用户列表页面开发

项目介绍

用户列表页面开发,可以实现简单的查询,删除,修改,和添加用户信息功能。前端使用vue框架,后端使用springboot框架,一个简单的vue+springboot前后端分离小项目。

本项目主要模块及技术点如图

项目源码+笔记+资料

vue-springboot_jb51.rar

1、前端html页面编写

页面:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="external nofollow" >
</head>
<body>
    <div id="app">

        <div class="container-fluid">
            <!--标题行-->
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3"><h1 class="text-center">用户列表</h1></div>
            </div>
            <!--数据行-->
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <!--添加按钮-->
                    <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" btn-success btn-sm">添加</a>
                    <!--列表-->
                    <table class="table table-striped table-bordered" style="margin-top: 10px;">
                        <tr>
                            <td>编号</td>
                            <td>姓名</td>
                            <td>工资</td>
                            <td>年龄</td>
                            <td>个人简介</td>
                            <td>操作</td>
                        </tr>
                        <tr v-for="user in users">
                            <td>{{user.id}}</td>
                            <td>{{user.name}}</td>
                            <td>{{user.salary}}</td>
                            <td>{{user.age}}</td>
                            <td>{{user.description}}</td>
                            <td>
                                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" btn btn-danger btn-sm">删除</a>
                                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" btn btn-info btn-sm">修改</a>
                            </td>
                        </tr>

                    </table>
                    <!--添加 和 修改表单-->
                    <form>
                        <div class="form-group">
                            <label class="control-label">编号</label>
                            <div >
                                <p class="form-control-static">0001</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name">姓名</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label for="salary">工资</label>
                            <input type="text" class="form-control" id="salary" placeholder="请输入工资">
                        </div>
                        <div class="form-group">
                            <label for="age">年龄</label>
                            <input type="text" class="form-control" id="age" placeholder="请输入年龄">
                        </div>
                        <div class="form-group">
                            <label for="description">个人简介</label>
                            <input type="text" class="form-control" id="description" placeholder="请输入个人简介">
                        </div>

                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>

    </div>
</body>
</html>
<!--引入axios-->
<script src="js/axios.min.js"></script>
<!--引入vue-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            msg:"vue 生命周期",
            users:[],
        },
        methods:{

        },
        computed:{

        },
        created(){
            //发送axios请求
            /*axios.get("http://localhost:8989/users").then(res=>{
               this.users = res.data;
            });*/
            this.users =[{id:1,name:"小陈",age:23,salary:2300,description:"他是一个小白!!!"}]
        },
    });
</script>

我们将html页面放到如下位置:

js目录下存放vue和axios资源文件。

2、springboot框架搭建

2.1、项目创建

1、新建maven项目,取名为vue_day3_admin

2、引入sprinboot-web依赖

<dependencies>
    <!--引入springboot-web依赖-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
</dependencies>

3、编写启动类AdminApplication

package com.xiao;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class AdminApplication {
    public static void main(String[] args) {
        SpringApplication.run(AdminApplication.class,args);
    }
}

4、测试

2.2、连接数据库

1、创建vue_day3数据库

CREATE TABLE t_user(
	id INT(6) PRIMARY KEY AUTO_INCREMENT,
	NAME VARCHAR(40),
	salary DOUBLE(7,2),
	age INT(3),
	des VARCHAR(200)
);

2、引入数据库相关依赖

<!--整合mybatis 引入依赖-->
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.1.3</version>
</dependency>
<!--mysql-->
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <scope>5.1.38</scope>
</dependency>
<!--druid-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid</artifactId>
    <version>1.2.1</version>
</dependency>
</dependencies>

3、application.properties配置文件编写

server.port=8990

# 整合mybatis

spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/vue_day3?characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=root

# 指定mapper出现的位置
mybatis.mapper-locations=classpath:com/xiao/mapper/*.xml
mybatis.type-aliases-package=com.xiao.entity

# 展示执行过程中sql语句
logging.level.com.xiao.dao=debug

4、springboot连接mysql数据库

4.1、打开Data Sources and Deivers 输入数据库user和password,并选择要连接的数据库。

4.2、设置时区为UTC

5、启动测试一下

没有任何问题。

2.3、项目完整依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>vue_day3_admin</artifactId>
    <version>1.0-SNAPSHOT</version>

    <!--继承springboot父项目-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.0</version>
    </parent>
    <dependencies>
        <!--引入springboot-web依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--整合mybatis 引入依赖-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>5.1.38</scope>
        </dependency>
        <!--druid-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.1</version>
        </dependency>
        <!--本地测试-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <version>1.5.12.RELEASE</version>
            <scope>test</scope>
        </dependency>
    </dependencies>
</project>

3、编写entity层

创建user实体类

package com.xiao.entity;

public class User {
    private Integer id;
    private String name;
    private Double salary;
    private Integer age;
    private String des;

    public User() {
    }

    public User(Integer id, String name, Double salary, Integer age, String des) {
        this.id = id;
        this.name = name;
        this.salary = salary;
        this.age = age;
        this.des = des;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Double getSalary() {
        return salary;
    }

    public void setSalary(Double salary) {
        this.salary = salary;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getDes() {
        return des;
    }

    public void setDes(String des) {
        this.des = des;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", salary=" + salary +
                ", age=" + age +
                ", des='" + des + '\'' +
                '}';
    }
}

4、查询用户信息

4.1、后端代码编写

1、UserDAO编写

package com.xiao.dao;

import com.xiao.entity.User;

import java.util.List;

public interface UserDAO {

    //查询所有用户信息
    List<User> findAll();
}

2、UserDAOMapper.xml编写

resources下创建如下目录

代码:

<?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">
<mapper namespace="com.xiao.dao.UserDAO">
    <!--findAll-->
    <select id="findAll" resultType="User">
        select id,name,salary,age,des from t_user;
    </select>
</mapper>

3、service层编写

UserService 接口

package com.xiao.service;

import com.xiao.entity.User;
import java.util.List;

public interface UserService {
    //查询所有用户方法
    List<User> findAll();
}

UserServiceImpl 实现类

package com.xiao.service;

import com.xiao.dao.UserDAO;
import com.xiao.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service //代表这是一个业务层组件 作用:用来在spring工厂中创建一个userServiceImpl对象
@Transactional //代表给类中所有的方法加入事务控制
public class UserServiceImpl implements UserService{

    @Autowired
    private UserDAO userDAO;

    @Override
    @Transactional(propagation = Propagation.SUPPORTS) //方法上声明事务注解
    public List<User> findAll() {
        return userDAO.findAll();
    }
}

4、进行test测试

BasicTest

package com.xiao.test;
import com.xiao.AdminApplication;
import org.junit.runner.RunWith;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;
@SpringBootTest(classes = AdminApplication.class) //指定入口类@RunWith(SpringRunner.class)  //启动工厂public class BasicTest {}

TestUserService

package com.xiao.test;
import com.xiao.service.UserService;
import org.junit.Test;
import org.springframework.beans.factory.annotation.Autowired;
public class TestUserService extends BasicTest
{
    @Autowired private UserService userService;
    @Test public void findAll() {
        userService.findAll().forEach(user -> System.out.println(user));
    }
}

测试成功!!!

4.2、前端代码编写

1、在created()函数中添加axios请求

# 生命周期钩子:生命周期函数
初始化阶段
1.beforeCreate vue实例自身事件生命周期初始化
2.created 完成自定义data methods computed 注入和校验 推荐
3.beforeMount将el指向html编译为模板,并没有完成模板注入
4.Mounted将编译模板进行数据注入,并将注入完成模板形成虚拟dom替换el指向原始dom

代码:

var app = new Vue({
    el: "#app",
    data:{
        msg:"vue 生命周期",
        users:[], //定义一个users空数组,用来存贮所有用户的信息
    },
    methods:{

    },
    computed:{

    },
    created(){ //执行 data methods computed 等完成注入和校验
        //发送axios请求
        axios.get("http://localhost:8990/users").then(res=>{
            console.log(res.data);
            this.users = res.data;
        }); //es6 箭头函数 注意:箭头函数内部没有自己this  简化 function(){} //存在自己this
    },
});

2、测试

测试成功!!!

5、添加用户信息

5.1、后端代码编写

1、UserDAO接口层

//查询所有用户信息
List<User> findAll();

2、UserDAOMapper.xml

<!--save-->
<insert id="save" parameterType="User" useGeneratedKeys="true" keyProperty="id">
    insert into t_user values (#{id},#{name},#{salary},#{age},#{des})
</insert>

使用 mysql 自增长序列,新插入一条数据时,怎么得到主键?

加入以下属性即可:

useGeneratedKeys=“true” keyProperty=“id”

useGeneratedKeys 取值范围true、false 默认值是:false。 含义:设置是否使用JDBC的getGenereatedKeys方法获取主键并赋值到keyProperty设置的领域模型属性中。

keyProperty 取id的key值,主要是在主键是自增的情况下,添加成功后可以直接使用主键值,其中keyProperty的值是对象的属性值,不是数据库表中的字段名。

3、service层编写

UserService

//保存用户信息
void save(User user);

UserServiceImpl

@Override
public void save(User user) {
    userDAO.save(user);
}

4、UserController控制类

//添加员工信息接口
@PostMapping("saveOrUpdate")
public void saveOrUpdate(@RequestBody User user){
    System.out.println(user);
    userService.save(user);
}

5.2、前端代码编写

1、form表单中添加v-model双向绑定

</div>
<div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" v-model="user.name" id="name" placeholder="请输入姓名">
</div>
<div class="form-group">
    <label for="salary">工资</label>
    <input type="text" class="form-control" v-model="user.salary" id="salary" placeholder="请输入工资">
</div>
<div class="form-group">
    <label for="age">年龄</label>
    <input type="text" class="form-control" v-model="user.age" id="age" placeholder="请输入年龄">
</div>
<div class="form-group">
    <label for="description">个人简介</label>
    <input type="text" class="form-control" v-model="user.des" id="description" placeholder="请输入个人简介">
</div>
<button type="button" class="btn btn-primary btn-block" @click="saveOrUpdate">提交</button>

2、给提交按钮绑定 saveOrUpdate方法

    var app = new Vue({
        el: "#app",
        data:{
            msg:"vue 生命周期",
            users:[], //定义一个users空数组,用来存贮所有用户的信息
            user:{},  //定义了一个空的json对象
        },
        methods:{
            saveOrUpdate(){ //保存或者修改方法
                //发送添加的请求
                console.log(this.user);
                axios.post("http://localhost:8990/saveOrUpdate",this.user).then(res=>{
                    this.user={}; //添加成功,清空数据
                    alert('用户信息更新成功!');
                    //更新原始列表的数据
                    this.findAll(); //调用查询所有
                }).catch(err=>{
                    alert('用户信息更新失败!')
                });
            },
            findAll(){
                //发送axios请求
                axios.get("http://localhost:8990/users").then(res=>{
                    console.log(res.data);
                    this.users = res.data;
                }); //es6 箭头函数 注意:箭头函数内部没有自己this  简化 function(){} //存在自己this
            }
        },

3、测试一下

测试成功!!!

6、修改用户信息

6.1、后端代码

1、UserDAO

//更新用户信息
void update(User user);

//基于id查询用户信息
User findById(Integer id);

2、UserDAOMapper.xml

<!--update-->
<update id="update" parameterType="User">
    update t_user
    set
    name = #{name},
    age = #{age},
    salary = #{salary},
    des = #{des}
    where id = #{id}
</update>

<!--findById-->
<select id="findById" parameterType="Integer" resultType="User">
    select
    id,name,age,salary,des
    from t_user
    where id = #{id}
</select>

3、service

UserService

//修改用户信息
void update(User user);

//基于id查询用户信息
User findById(Integer id);

UserServiceImpl实现类

@Override
public void update(User user) {
    userDAO.update(user);
}

@Override
@Transactional(propagation = Propagation.SUPPORTS) //方法上声明事务注解  Propagation:事务传播属性 支持事务
public User findById(Integer id) {
    return userDAO.findById(id);
}

4、control

在这里我们要根据前端请求的参数进行判断。如果前端请求的参数中id为空,说明是添加操作,否则是更新操作,我们执行相对应的代码。

//添加员工信息接口
@PostMapping("saveOrUpdate")
public void saveOrUpdate(@RequestBody User user){
    log.info("接收的业务逻辑:{}",user);
    //判断是否存在id
    //存在: 更新操作      不存在id: 添加操作
    if(StringUtils.isEmpty(user.getId())){ //如果为空
        log.info("添加业务逻辑......");
        userService.save(user);  //添加
    }else{
        log.info("更新业务逻辑......");
        userService.update(user);
    }

}

6.2、前端代码

我们点击修改按钮,显示用户信息。

1、我们先给修改按钮添加根据id查询用户信息事件

<a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" btn btn-info btn-sm" @click.prevent="userEditDetail(user.id)">修改</a>

2、userEditDetail(id)

userEditDetail(id){  //用来在表单中将当前点击用户信息进行回显
    axios.get("http://localhost:8990/user/"+id).then(res=>{
        this.user = res.data;  //完成数据回显
    });
},

3、给提交按钮绑定修改或者添加用户信息事件

<button type="button" class="btn btn-primary btn-block" @click="saveOrUpdate">提交</button>

4、saveOrUpdate()

saveOrUpdate(){ //保存或者修改方法
    if(!this.user.name){
        alert("姓名不能为空!");
        return ;
    }
    console.log(this.user);
    axios.post("http://localhost:8990/saveOrUpdate",this.user).then(res=>{
        this.user={}; //添加成功,清空数据
        alert('用户信息更新成功!');
        //更新原始列表的数据
        this.findAll(); //调用查询所有
    }).catch(err=>{
        alert('用户信息更新失败!')
    });
},
},
findAll(){
    //发送axios请求
    axios.get("http://localhost:8990/users").then(res=>{
        console.log(res.data);
        this.users = res.data;
    }); //es6 箭头函数 注意:箭头函数内部没有自己this  简化 function(){} //存在自己this
},

5、测试一下

测试成功!!!

7、删除用户信息

7.1、后端代码

1、UserDAO接口

//基于id删除用户信息
void delete(Integer id);

2、UserDAOMapper.xml

<!--delete-->
<delete id="delete" parameterType="Integer">
    delete from t_user where id = #{id}
</delete>

3、service

UserService

//根据id删除用户信息
void delete(Integer id);

UserServiceImpl

@Override
public void delete(Integer id) {
    userDAO.delete(id);
}

4、controller

//根据id删除用户信息的接口
@DeleteMapping("delete/{id}")
public void delete(@PathVariable Integer id){
    userService.delete(id);
}

7.2、前端代码

1、给删除按钮绑定删除事件

<a href="javascript:;" rel="external nofollow"  class="btn btn-danger btn-sm" @click="delUser(user.id)">删除</a>

2、delUser(id)删除用户方法

delUser(id){ //删除用户方法
    //友情提醒删除
    if(window.confirm("您确定要删除这条记录吗?")){
        axios.delete("http://localhost:8990/delete/"+id).then(res=>{
            alert("用户信息删除成功!");
            this.findAll(); 调用查询所有
        }).catch(err=>{
            alert("用户信息删除失败!");
        });
    }
}

3、测试一下

删除信息成功!!!

到此这篇关于Vue结合Springboot实现用户列表单页面(前后端分离)的文章就介绍到这了,更多相关Vue结合Springboot用户列表内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-07-22

vue+springboot前后端分离实现单点登录跨域问题解决方法

最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

使用springboot结合vue实现sso单点登录

本文实例为大家分享了springboot vue实现sso单点登录的具体代码,供大家参考,具体内容如下 项目结构: 开发工具:idea, maven3 静态文件下载地址 1.pom文件: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.or

部署vue+Springboot前后端分离项目的步骤实现

单页应用 vue经常被用来开发单页应用(SinglePage Web Application,SPA),什么叫做单页应用呢,也就是只有一张web页面的应用,单页应用的跳转只需要刷新局部资源,大大加快的了我们页面的响应速度 前端页面打包 打开vue工程,在项目根目录下创建一个配置文件:vue.config.js,然后在里面写入以下内容: module.exports = { assetsDir: 'static', // 静态资源保存路径 outputDir: 'dist', // 打包后生成的文

spring boot+vue 的前后端分离与合并方案实例详解

springboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue的双向数据绑定,这种方式只适合于普通的全栈开发. 2.[推荐]使用vue官方的脚手架创建单独的前端工程项目,做到和后端完全独立开发和部署,后端单独部署一个纯restful的服务,而前端直接采用nginx来部署,这种称为完全的前后端分离架构开发模式,但是在分离中有很多api权限的问题需要解决,包括部

Springboot项目与vue项目整合打包的实现方式

我的环境 * JDK 1.8  * maven 3.6.0  * node环境 1.为什么需要前后端项目开发时分离,部署时合并? 在一些公司,部署实施人员的技术无法和互联网公司的运维团队相比,由于各种不定的环境也无法做到自动构建,容器化部署等.因此在这种情况下尽量减少部署时的服务软件需求,打出的包数量也尽量少.针对这种情况这里采用的在开发中做到前后端独立开发,打包时在后端springboot打包发布时将前端的构建输出一起打入,最后只需部署springboot的项目即可,无需再安装nginx服务器

解决前后端分离 vue+springboot 跨域 session+cookie失效问题

环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查.后续请求取出的用户都为null. 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了.然后发现cookie浏览器不能自动保存,服务器响应set-cookie了 搜索问题,发现跨域,服务器响应的setCookie浏览器无

springboot整合vue实现上传下载文件

springboot整合vue实现上传下载文件,供大家参考,具体内容如下 环境 springboot 1.5.x 完整代码下载:springboot整合vue实现上传下载 1.上传下载文件api文件 设置上传路径,如例子: private final static String rootPath = System.getProperty("user.home")+File.separator+fileDir+File.separator; api接口: 下载url示例:http://l

SpringBoot+Vue.js实现前后端分离的文件上传功能

这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目. 后端项目搭建 我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可 项目创建成功后,maven的pom配置如下 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> &l

nginx+vue.js实现前后端分离的示例代码

1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,

Springboot+Vue+shiro实现前后端分离、权限控制的示例代码

本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelAndView,逐渐有了前后端分离的想法,由于之前,没有接触过,主要参考的还是网上的一些博客教程等,初步完成了前后端分离,在此记录以备查阅. 一.前后端分离思想 前端从后端剥离,形成一个前端工程,前端只利用Json来和后端进行交互,后端不返回页面,只返回Json数据.前后端之间完全通过public A

vue中使用input[type="file"]实现文件上传功能

注意:input[type="file"] 标签中的属性accept="application/msword,application/pdf" 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚发现,如果有遇到这个问题的可以参考下---下面有更改:) ``` <template> <div id="my-careers"> <h

Django+Vue.js搭建前后端分离项目的示例

在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是自己在摸索的学着,所以也谈不上什么体系.系统学习.在这里主要是为了实现把项目前后端分离开. 这里假设你的电脑上所需的django.vue.js已经有了,如果没有,往下拉就是vue.js的安装流程.django前面写过了,就不赘述了. 一,正常搭建前后端分离项目流程 1.创建django项目 命令: django-admin startproject ulb_manager 结构: ├── manage.py

详解利用 Vue.js 实现前后端分离的RBAC角色权限管理

项目背景:物业管理后台,不同角色拥有不同权限 采用技术:Vue.js + Vuex + Element UI 实现 RBAC 权限管理需要后端接口支持,这里仅提供前端解决方案. 因代码篇幅较大,对代码进行了删减,文中 "..." 即为省略的一部分代码. 大致思路: 首先登录成功后,从后台拉取用户当前可显示的菜单和可用权限列表,分别将其存入 store 的 nav(菜单导航) 和 auth(用户可用权限) 中,在用户切换路由时,判断是否存在 auth ,如果不存在,则重新获取,判断当前访

vue+mock.js实现前后端分离

之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离. 安装: npm install mockjs 这里先写个小案例介绍一下具体使用,写法不规范,仅供参考. 然后案例讲完后我们讲具体的规范使用 那么一起来看看这个案例吧: <script> import Mock from "mockjs" export default { name: "FunctionsDbSource", methods:{ /

AjaxUpLoad.js实现文件上传功能

AjaxUpLoad.js的使用实现无刷新文件上传,如图. 图1 文件上传前 图2 文件上传后 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></span> <input type="hidden"

SpringBoot+layui实现文件上传功能

什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.用我的话来理解,就是spring boot其实不是什么新的框架,它默认配置了很多框架的使用方式,就像maven整合了所有的jar包,spring boot整合了所有的框架(不知道这样比喻是否合适). 页面代码(只需要引入基础layui的css与js) <fieldset c

Ajax 配合node js multer 实现文件上传功能

说明 作为一个node 初学者,最近在做一个聊天软件,支持注册.登录.在线单人.多人聊天.表情发送.各种文件上传下载.增删好友.聊天记录保存.通知声开关.背景图片切换.游戏等功能,所以用到了multer 模块,经过各种查文档,做demo例子,终于成功实现单个文件上传功能,支持大部分文件格式上传,同时显示到网页上 效果 是不是有种微信即视感,没错,就是根据网页版微信来做的, 要实现整体效果的话,要配合css和html来做,前端初学者,第一次发博客,实在捉急,近期,将会将代码放到github上去,感