ssm+vue实现前后端分离的登录注册 |
您所在的位置：网站首页 › 前后端分离登录注册实现 › ssm+vue实现前后端分离的登录注册 |
ssm+vue实现前后端分离的登录注册
|
技术栈：vue2.0+ssm 流程图：
前端： 1.新建vue项目 vue init webpack 项目名2.安装所需的依赖 //安装element组件库 npm i element-ui -S //在main.js中引入element组件库 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); //安装 scss 和 scss-loader npm install scss-loader scss --save // 安装 node-sass 和 sass-loader npm install [email protected] --save npm install [email protected] --save 在 build 文件夹目录下 webpack.base.conf.js 文件中，找到 rules 添加以下代码 { test: /\.scss$/, loaders: ['style', 'css', 'sass'] },3.设计并编写页面
4.接口对接 首先解决跨域问题 proxyTable: { '/api': { target: 'http://localhost:8080/', //源地址 changeOrigin: true, //改变源 pathRewrite: { '^/api': 'http://localhost:8080/' //路径重写 } } },安装axios import axios from "axios"; //利用vue的原型属性，方便调用 Vue.prototype.$axios = axios;对于axios的封装参考以前写的另外一篇博客 利用原型链和闭包进行封装自定义的js模板： vue中封装axios的请求方法_Famiglistimo-run的博客-CSDN博客 然后可以开始进行接口对接 后端： 1.数据库设计及建表 create table user( username varchar(32) not null primary key, password int not null, phone int not null );2.新建后台项目，基本环境搭建 新建基本框架结构 pojo dao service controller applicationContext.xml //整合资源 mybatis-config.xml //映射 3.Mybatis层编写 数据库配置文件 database.properties jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/ssmbuild?useSSL=true&useUnicode=true&characterEncoding=utf8 jdbc.username=root jdbc.password=root 编写核心配置文件，mybatis-config.xml dao层编写用户类 package pojo; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @Data//提供get,set,toString方法 @AllArgsConstructor @NoArgsConstructor public class user { private String username; private int password; private int phone; } 编写usermapper package dao; import pojo.user; import java.util.List; public interface userMapper { //增加一个User int addUser(user user); //根据id删除一个User int deleteUserByUserName(String userName); //更新User int updateUser( user user); //根据id查询,返回一个User user queryUserByUserName(String userName); //查询全部User,返回list集合 List queryAllUser(); } usermapper.xml的编写 insert into ssmbuild.user(username,password,phone) values (#{username}, #{password}, #{phone}) delete from ssmbuild.user where username=#{username} update ssmbuild.user set username = #{username},password = #{password},phone = #{phone} where username = #{username} select * from ssmbuild.user where username = #{username} SELECT * from ssmbuild.user package service; import pojo.user; import java.util.List; public interface userService { //增加一个User int addUser(user user); //根据id删除一个User int deleteUserByUserName(String userName); //更新User int updateUser(user user); //根据id查询,返回一个User Boolean queryUserByUserName(String userName); //查询全部User,返回list集合 List queryAllUser(); user login(String userName,int password); } userservice的实现类 package service; import dao.userMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import pojo.user; import java.util.List; @Service("userService") public class userServiceIml implements userService { //调用dao层的操作，设置一个set接口，方便Spring管理 private dao.userMapper userMapper; @Autowired public void setUserMapper(userMapper userMapper) { this.userMapper = userMapper; } public int addUser(user user) { return userMapper.addUser(user); } public int deleteUserByUserName(String userName) { return userMapper.deleteUserByUserName(userName); } public int updateUser(user users) { return userMapper.updateUser(users); } public Boolean queryUserByUserName(String username) { if(userMapper.queryUserByUserName(username)!=null){ return true; }else{ return false; } } public List queryAllUser() { return userMapper.queryAllUser(); } public user login(String userName, int password) { if(userMapper.queryUserByUserName(userName)!=null){ if(password==userMapper.queryUserByUserName(userName).getPassword()){ return userMapper.queryUserByUserName(userName); } } return null; } }4.Spring层编写 spring整合dao层 spring整合service5.SpringMVC层编写 整合spring-mvc6.Spring配置整合文件，applicationContext.xml 7.controller层的编写 package controller; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import pojo.user; import service.userService; import java.util.List; @Controller @RequestMapping("/user") @ResponseBody public class userController { @Autowired private userService userService; @RequestMapping("/allUser") public List allUser() { List list = userService.queryAllUser(); return list; } @RequestMapping("/addUser") public Boolean addUser(user user) { userService.addUser(user); return true; } //Restful风格 @RequestMapping("/del/{userName}") public Boolean deleteUser(@PathVariable("userName") String userName) { userService.deleteUserByUserName(userName); return true; } @RequestMapping("/updateUser") public Boolean updateUser(user user) { userService.updateUser(user); return true; } @RequestMapping("/findUserName/{userName}") public Boolean findUserName(@PathVariable("userName") String userName){ Boolean res = userService.queryUserByUserName(userName); return res; } @RequestMapping("/login/{userName}/{password}") public user login(@PathVariable("userName") String userName,@PathVariable("password") int password){ user res=userService.login(userName,password); return res; } }8.*添加web框架支持 此处需要注意，需要将maven的包手动导入，才能将项目跑起来。 web.xml DispatcherServlet org.springframework.web.servlet.DispatcherServlet contextConfigLocation classpath:applicationContext.xml 1 DispatcherServlet / encodingFilter org.springframework.web.filter.CharacterEncodingFilter encoding utf-8 encodingFilter /* 15 |
【本文地址】
今日新闻 |
推荐新闻 |