精华内容
下载资源
问答
  • 基于spring boot vue的个人博客系统(前端部分)
  • 一个微信商城,基于Springboot 微信 Vue实现,便于学习
  • SpringBootVue(V2.0).md

    2021-03-25 14:30:57
    初次接触SpringBoot以及Vue的人,第一版案例并未使用element-ui进行美化,需要Typora打开
  • SpringBootVue 这个是供应链的后台项目的源码这个是我们的Vue + iview的供应链后台系统管理的源码
  • 一个基于vue-admin-template的hexo博客后台管理,项目采用SpringBoot Vue开发
  • Day56SpringBootVue-CRUD**

    2020-11-30 10:08:51
    学习目标 (1)后台使用springBoot (2)前台使用Vue 准备数据库 (1)创建数据库与表 drop database vuejsdemo; create database vuejsdemo; use vuejsdemo; #创建数库中的表 ...email varch

    学习目标

    • (1)后台使用springBoot
    • (2)前台使用Vue

    准备数据库

    • (1)创建数据库与表
      在这里插入图片描述
    drop database vuejsdemo; 
    create database vuejsdemo; 
    use vuejsdemo;
    #创建数库中的表
    create table user(
    id int primary key auto_increment,
    age int,
    username varchar(20), 
    `password` varchar(50), 
    email varchar(50), 
    sex varchar(20)
    )
    
    
    insert into `user` values ('1', '33', '张老师', '123', 'zzz@wzx.cn', '男 ');
    insert into `user` values ('2', '31', '刘老师', '123', 'lll@wzx.cn', '女');
    insert into `user` values ('3', '17', '赵工', '213', 'zg@wzx.cn', '女');
    insert into `user` values ('4', '40', '高管', '213', 'gg@wzx.cn', 'female');
    insert into `user` values ('5', '28', '李总', '312', 'lz@wzx.com', 'male');
    insert into `user` values ('6', '34', '王董', '312', 'wd@wzx.com', 'male');
    insert into `user` values ('7', '55', '孙老板', '4321', 'slb@wzx.com', '男');
    insert into `user` values ('8', '19', '陈秘书', '4321', 'cms@wzx.com', '女');
    
    
    

    配置application.properties

    # app
    spring.application.name=demo01crud
    server.port=8001
    # datasource hykari
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    spring.datasource.username=root
    spring.datasource.password=123456
    spring.datasource.url=jdbc:mysql://localhost:3306/vuejsdemo?characterEncoding=UTF-8&serverTimezone=UTC&useSSL=false
    # mybatis
    mybatis.type-aliases-package=com.wzx.demo01curd.domain
    # mybatis -dao interface  需要在Main里配置
    # @MapperScan(basePackages = {"com.wzx.demo01curd.dao"})
    # log
    mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
    # resources
    spring.web.resources.static-locations=classpath:/static/,classpath:/templates/
    
    

    实体类User

    @Data
    public class User {
        private Integer id;
        private String username;
        private String password;
        private String sex;
        private int age;
        private String email;
    }
    
    

    编写持久层和业务层代码

    Test

    @SpringBootTest
    @Slf4j
    class Demo01curdApplicationTests {
    
        @Autowired
        UserService userService;
        @Test
        void test01() {
            List<User> userList=userService.findAll();//#查询多条
            User user =userService.findById(2);//查询一条
            log.info("userList "+userList);
            log.info("user "+user);
            userService.deleteById(2);//删除一条
    
        }
        @Test
        void test02() {
            User user = new User();
            user.setId(9);
            user.setUsername("hello word");
            //userService.saveUser(user);//创建一条
            userService.updateUser(user);//更新一条
        }
    
    }
    
    

    UserService

    public interface UserService {
        List<User> findAll();
    
        User findById(int id);
    
        void deleteById(int id);
    
        void saveUser(User user);
    
        void updateUser(User user);
    }
    
    

    UserServiceImpl

    public class UserServiceImpl implements UserService {
        @Autowired
        UserDao userDao;
        @Override
        public List<User> findAll() {
            return userDao.findAll();
        }
    
        @Override
        public User findById(int id) {
            return userDao.findById(id);
        }
    
        @Override
        public void deleteById(int id) {
            userDao.deleteById(id);
        }
    
        @Override
        public void saveUser(User user) {
            userDao.save(user);
        }
    
        @Override
        public void updateUser(User user) {
            userDao.update(user);
        }
    }
    

    UserDao

    public interface UserDao {
        @Select("select * from user order by id asc")
        List<User> findAll();
        @Select(" select * from user where id = #{id}")
        User findById(int id);
        @Delete("delete from user where id = #{id}")
        void deleteById(int id);
        @Insert("insert into user (username,password,email,age,sex)values(#{username},#{password},#{email},#{age},#{sex})")
        void save(User user);
        @Update("update user set username=#{username},password=#{password},email=#{email},age=#{age},sex=#{sex} where id =#{id}")
        void update(User user);
    }
    
    

    restFul api

    在这里插入图片描述

    @Data
    public class Result {
        private int code;
        private String msg;
        private Object data;
        public static Result init(int code,String msg,Object data){
            Result result = new Result();
            result.code=code;
            result.msg=msg;
            result.data=data;
            return result;
        }
    }
    
    

    UserController

    @RestController
    @RequestMapping("/users")
    public class UserController {
        //由于Controller属于web层,web层调用Service
        @Autowired
        UserService userService;
    
        @RequestMapping(path = "", method = {RequestMethod.GET})
        public Object getList() {
            List<User> data = userService.findAll();
            return Result.init(200, "查询成功", data);
        }
    
        @RequestMapping(path = "/{id}", method = {RequestMethod.GET})
        public Object getOne(@PathVariable int id) {
            User user = userService.findById(id);
            return Result.init(200, "查询成功", user);
        }
    
        @RequestMapping(path = "/{id}", method = {RequestMethod.DELETE})
        public Object deleteOne(@PathVariable int id) {
            try {
                userService.deleteById(id);
                return Result.init(200, "删除成功", null);
            } catch (Exception e) {
                e.printStackTrace();
                return Result.init(200, "删除失败", null);
            }
        }
    
        @RequestMapping(path = "", method = {RequestMethod.POST})
        public Object createOne(@RequestBody User user) {
            try {
                userService.saveUser(user);
                return Result.init(200, "新增成功", null);
            } catch (Exception e) {
                e.printStackTrace();
                return Result.init(200, "新增失败", null);
            }
        }
        @RequestMapping(path = "/{id}", method = {RequestMethod.PUT})
        public Object updateOne(@PathVariable int id,@RequestBody  User user) {
            //页面处理方式有两种
            //第一种就是地址带上id /users/8
            //第二种就是页面上有个隐藏的input,值是id
            try {
                userService.updateUser(user);
                return Result.init(200, "修改成功", null);
            } catch (Exception e) {
                e.printStackTrace();
                return Result.init(200, "修改失败", null);
            }
        }
        //为什么User上要添加@RequestBody
        //是因为Vue使用axios发送post请求时,是将json数据提交过来
        //所以,Controller方法需要将json转换成user对象
    }
    
    

    postman测试

    在这里插入图片描述

    展开全文
  • Day56SpringBootVue-Vue***

    千次阅读 2020-11-30 11:36:51
    引入vue 与 axios <script src="js/vuejs-2.5.16.js"></script> <script src="js/axios-0.18.0.js"></script> 引入自己的js <script src="js/moduel-user....div v-if="viewid == 1">

    引入vue 与 axios

    在这里插入图片描述

      <script src="js/vuejs-2.5.16.js"></script>
        <script src="js/axios-0.18.0.js"></script>
    

    引入自己的js

    <script src="js/moduel-user.js"></script>
    

    页面编写

    <div id="app">
    
    
        <div v-if="viewid == 1">
            <button @click="showSaveForm()" >新建</button>
            <table border="1px" width="100%">
                <tr>
                     <td>序号</td>
                     <td>id</td>
                     <td>用户名</td>
                     <td>密码</td>
                     <td>邮箱</td>
                     <td>年龄</td>
                     <td>性别</td>
                     <td>操作</td>
                </tr>
                <tr v-for="(user,index) in users">
                    <td>{{index+1}}</td>
                    <td>{{user.id}}</td>
                    <td>{{user.username}}</td>
                    <td>{{user.password}}</td>
                    <td>{{user.email}}</td>
                    <td>{{user.age}}</td>
                    <td>{{user.sex}}</td>
                    <td>
                        <button @click="deleteById(user.id)">删除</button>
                        <button @click="findOne(user.id)">编辑</button>
                    </td>
                </tr>
            </table>
        </div>
    
        <div v-if="viewid != 1">
            <form>
                <input type="hidden"  v-model="user.id"  >
               用户名 :<input type="text"  v-model="user.username"  ><br/>
               密码:<input type="text"    v-model="user.password"   ><br/>
               邮箱:<input type="text"    v-model="user.email"   ><br/>
               年龄:<input type="text"    v-model="user.age"   ><br/>
               性别:<input type="text"    v-model="user.sex"   ><br/>
               <button @click="back">返回</button> <button v-if="viewid == 2" @click="saveUser()">保存</button><button v-if="viewid == 3" @click="updateUser(user.id)">修改</button><br/>
            </form>
        </div>
    </div>
    

    module-user.js

    在这里插入图片描述

    //vue的核心对象 view model  双向绑定
    //如果数据发生改变,页面同步显示
    //反之也成立
    //view model
    var vm = new Vue(
        {
            el:'#app', //让vu掌握指定的视图区域
            data:{
                user:{
                    id:-1,
                    username:'',
                    password:'',
                    email:'',
                    sex:'',
                    age:0
                },
                viewid:1, //控制视图的状态  ==1 显示列表,==2 添加 == 3修改
                users:[] //集合
            },
            methods:{
                //函数
                findAll:function () {
                    var vm = this
                    axios.get('/users')
                        .then(function (response) {//正常
                            console.log(response.data);
                            vm.users = response.data.data
                            vm.viewid = 1
                        })
                        .catch(function (err) {//请求失败
                            console.log(err);
                            alert(response.err)
                        });
                },
                findOne:function (id) {
                    var vm = this
                    axios.get('/users/'+id)
                        .then(function (response) {//正常
                            console.log(response.data);
                            vm.user = response.data.data
                            vm.viewid = 3
                        })
                        .catch(function (err) {//请求失败
                            console.log(err);
                            alert(response.err)
                        });
                },
                deleteById:function (id) {
                    axios.delete('/users/'+id)
                        .then(function (response) {//正常
                            console.log(response.data);
                            //vm.users = response.data.data
                            //vm.viewid = 1
                            vm.findAll()
                        })
                        .catch(function (err) {//请求失败
                            console.log(err);
                            alert(response.err)
                        });
                },
                showSaveForm:function(){
                    var vm = this
                    vm.viewid = 2
                },
                back:function(){
                    var vm = this
                    vm.viewid = 1
                },
                saveUser:function () {
                    var vm = this
                    axios.post('/users',vm.user)
                        .then(function (response) {//正常
                            console.log(response.data);
                            vm.findAll()
                        })
                        .catch(function (err) {//请求失败
                            console.log(err);
                            alert(response.err)
                        });
                },
                updateUser:function (id) {
                    var vm = this
                    axios.put('/users/'+id,vm.user)
                        .then(function (response) {//正常
                            console.log(response.data);
                            vm.findAll()
                        })
                        .catch(function (err) {//请求失败
                            console.log(err);
                            alert(response.err)
                        });
                }
            },
            created:function () {
                //发送请求查询列表
               // alert("vm创建成功")
                //this表示当前vm对象
                this.findAll()
            }
        }
    ) //创建了MVVM中的VM对象
    
    • vm对象的重点在于两个,一个是data,另一个是methods
    • data,可以接收服务端返回的数据,同步到页面显示
    • 也可以将表单里面的数据同步保存,然后提交给后台。
    展开全文
  • 1.vue 更换vue的欢迎页面,改用自己的欢迎页面,效果图 2.用vscode编辑器打开源码的路径 在源码src的目录下新建views/login/ 新建vue文件 -login.vue目录结构如下 登录

    1.vue 更换vue的欢迎页面,改用自己的欢迎页面,效果图
    这里写图片描述
    2.用vscode编辑器打开源码的路径
    在源码src的目录下新建views/login/
    新建vue文件 -login.vue目录结构如下
    这里写图片描述

    <template>
        <div>
            <div class="login-wrap" v-show="showLogin">
                <h3>登录</h3>
                <p v-show="showTishi">{{tishi}}</p>
                <input type="text" placeholder="请输入用户名" v-model="username">
                <input type="password" placeholder="请输入密码" v-model="password">
                <button v-on:click="login">登录</button>
                <span v-on:click="ToRegister">没有账号?马上注册</span>
            </div>
    
            <div class="register-wrap" v-show="showRegister">
                <h3>注册</h3>
                <p v-show="showTishi">{{tishi}}</p>
                <input type="text" placeholder="请输入用户名" v-model="newUsername">
                <input type="password" placeholder="请输入密码" v-model="newPassword">
                <button v-on:click="register">注册</button>
                <span v-on:click="ToLogin">已有账号?马上登录</span>
            </div>
        </div>
    </template>
    <style>
        .login-wrap{text-align:center;}
        input{display:block; width:250px; height:40px; line-height:40px; margin:0 auto; margin-bottom: 10px; outline:none; border:1px solid #888; padding:10px; box-sizing:border-box;}
        p{color:red;}
        button{display:block; width:250px; height:40px; line-height: 40px; margin:0 auto; border:none; background-color:#41b883; color:#fff; font-size:16px; margin-bottom:5px;}
        span{cursor:pointer;}
        span:hover{color:#41b883;}
    </style>
    <script>
        export default{
            data(){
                return{
                    showLogin: true,
                    showRegister: false,
                    showTishi: false,
                    tishi: '',
                    username: '',
                    password: '',
                    newUsername: '',
                    newPassword: ''
                }
            }
        }
    </script>

    接下来就是配置路由
    路径位置如下图
    这里写图片描述
    引入登录界面,然后在路由配置路径中去掉之前的欢迎页面,加入登录页面
    这里写图片描述
    完成以上的步骤,启动页面就可看到登录页面了

    展开全文
  • 主要介绍了SpringBoot + Vue 项目部署上线到Linux 服务器,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • Spring Boot+Vue全栈开发实战dpf,包含章节代码。pdf清晰度很好,从网盘直接下载即可,上述代码也可正常使用。如果以在学习SpringBoot,这将是一本很好的资料图书。
  • 主要介绍了vue+iview+less 实现换肤功能,项目搭建用的vue—cli,css框架选择的iview,具体操作流程大家跟随脚本之家小编一起看看吧
  • pring Boot+Vue全栈开发实战
  • 项目基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 Spring Security、Redis、Vue的前后端分离后台管理系统, 权限控制采用 RBAC,前端菜单动态路由
  • 该项目主要介绍了权限管理系统的用户管理功能、角色管理功能、角色资源功能、角色权限功能、日志管理、回收站、都能实现用户的增删查改
  • SpringBoot+Vue全栈开发实战,王松老师编写的,PDF高清版本。如有问题联系
  • 基于springboot的短信验证码简易demo 使用技术 springboot + springdatajpa + vue.js + axios + activemq + redis 整合的第三方平台 阿里大于短信平台 项目描述 这是一个使用阿里大于短信平台接口的登录demo,意在让...
  • springboot+vue整合案例

    2019-12-05 19:28:34
    这里面有一个是vue的项目和一个springboot的项目,还有我参加搭建的网址,当时为了springboot和vue整合搭建的一个表的增删改查,没有其他特殊功能,就是一个入门的整合demo
  • vue框架的一个笔记,里面包含了很多有关vue技术的知识,

空空如也

空空如也

1 2 3 4 5 ... 18
收藏数 351
精华内容 140
关键字:

springbootvue

vue 订阅
spring 订阅