复习:
MVC
1.动态SQL
.xml
select parameterType=Item
form item
<where>
<if test="categoryid !=null" >
category_id=#{
categoryId}
</if>
<if test="itemName !=null">
item_name like concat(%,#{
itemName},'%')
</if>
</where>
以上写法,在工作中可以不用自己写
使用我提供的foreach原始 遍历集合
链接:https://pan.baidu.com/s/1j7zLtxCHc1e52lEJSZLOOw
提取码:4ssu
generatoer项目逆向工程,生成.xml、接口、pojo、Example、criteria
逆向工程不能生成多表查询!需要程序员自己实现。
项目实战:Vue+SSM+分类+商品
整合之前所学内容:开始做项目
1.项目需求分析:
2.数据分析:
projectService:SSM
projectWeb:主站
projectAdmin:后台管理员界面
3.用IDEA完成后台服务
3.1)下载DbDeom,拷贝到工作区,修改文件夹为projectService,修改pom.xml
链接:https://pan.baidu.com/s/1WhYXY1VeBQk5XTAUg2jUHQ
提取码:sgt8
修改文件夹项目名projectService
打开,找到pom.xml,修改为projectService
3.2)使用IDEA,File → open,修改pom.xml的jdk版本,F12,修改JDK,启动程序会报错,找不到url属性。
进行配置检查,看有没有报错
检查JDK版本
检查JDK是否正常
检查环境是否正常
检查入口类是否正常
Run As执行测试,url报错
3.3)在eclipse中删除以前生成的mapper.pojo,修改config.xml中的包名为com.tedu.mall,重新生成mapper和pojo
启动eclipse
打开generatorConfig.xml文件修改包名
然后打开GeneratorApp 右键Run As执行逆向
逆向成功,生成了两个包:
3.4) 拷贝mapper、pojo到IDEA项目中
启动IDEA把入口类
3.5)启动IDEA 拷贝mybatis04中的application.yml,或者自己新建一个application.yml,修改其中的包名
server:
port: 1314
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/mall?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2b8
username: root
password: root
mybatis:
mapperLocations: classpath:com.tedu.mall.mapper/*.xml
logging:
path: ./logs
level:
com.tedu.mall.mapper: debug
3.6)很重要的一步来了
打开resources文件夹
在入口类增加@mapperScan注解
作用:指定要变成实现类的接口所在的包,然后包下面的所有接口在编译之后都会生成相应的实现类
添加位置:是在Springboot启动类上面添加,
package com.tedu.DbDemo;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
//@SpringBootApplication 变红 设置maven
@SpringBootApplication
@MapperScan("com.tedu.mall.mapper")
public class DbDemoApplication {
//String变红,F12 设置JDK
public static void main(String[] args) {
SpringApplication.run(DbDemoApplication.class, args);
}
}
3.7) 在mall包中 创建一个controller包 在创建一个UserController类
package com.tedu.mall.Controller;
import com.tedu.mall.mapper.UserMapper;
import com.tedu.mall.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class UserController {
//从spring ioc容器取接口的代理对象
@Autowired
UserMapper userMapper;
@RequestMapping("/test")
public List<User> test(){
return userMapper.
selectByExample(null);
}
}
注意:这里的报错不管它
打开入口类 Run As测试:
http://localhost:1314/test
我调好的项目和代码,大家可以直接下载:
链接:https://pan.baidu.com/s/10h1Hw6hVy6-B_ehXUtC6iw
提取码:e0gb
项目实战操作开始:
在UserController类中
1.添加用户注册
Example简单介绍:
1.example是Mybatis数据层框架中的一个工具,可以帮我们完成sql语句中where条件句的书写,相当于where后面的部分,我们可以根据不同的条件来查询和操作数据库,简化书写sql的过程。
2.用MyBatis的逆向工程可以自动生成Example类。
Criteria语法和sql语句对比详解
Criteria简单介绍:
Criteria包含一个Cretiron的集合,每一个Criteria对象内包含的Cretiron之间是由AND连接的,是逻辑与的关系。
example中有一个Criterria的方法,里面
andUsernameEqualTo
andPasswordEqualTo
都是在生成example的时候生成的。这两个方法是判断单值的。
用Criteria实现多条件查询:
方法 | 说明 |
---|---|
Restrictions.eq | = |
Restrictions.allEq | 利用Map来进行多个等于的限制 |
Restrictions.gt | > |
Restrictions.ge | >= |
Restrictions.lt | < |
Restrictions.le | <= |
Restrictions.between | BETWEEN |
Restrictions.like | LIKE |
Restrictions.in | in |
Restrictions.and | and |
Restrictions.or | or |
Restrictions.sqlRestriction | 用SQL限定查询 |
package com.tedu.mall.Controller;
import com.tedu.mall.mapper.UserMapper;
import com.tedu.mall.pojo.User;
import com.tedu.mall.pojo.UserExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class UserController {
//从spring ioc容器取接口的代理对象
@Autowired
UserMapper userMapper;
//注册
@RequestMapping("/user/register")
//http://localhost:1314/user/register/?username=1&password=123
public String register(User user){
查询数据库,判断用户是否存在
UserExample userExample=new UserExample();
UserExample.Criteria criteria= userExample.or();
criteria.andPasswordEqualTo(user.getUsername());
List<User> list=userMapper.selectByExample(userExample);
if (list !=null && list.size()==0){
//用户名不存在,可以注册
int count=userMapper.insert(user);
if (count>=1){
return "注册成功";
}else {
return "注册失败";
}
}else {
return "用户名已经存在";
}
}
@RequestMapping("/test")
public List<User> test(){
return userMapper.
selectByExample(null);
}
}
Run As执行:
//http://localhost:1314/user/register/?username=1&password=123
2.添加用户登录
package com.tedu.mall.Controller;
import com.tedu.mall.mapper.UserMapper;
import com.tedu.mall.pojo.User;
import com.tedu.mall.pojo.UserExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class UserController {
//从spring ioc容器取接口的代理对象
@Autowired
UserMapper userMapper;
//登录
@RequestMapping("/user/login")
//http://localhost:1314/user/login/?username=1&password=123
public User login(User user){
//where username= and password
UserExample userExample=new UserExample();
UserExample.Criteria criteria=
userExample.or();
criteria.andUsernameEqualTo(user.getUsername());
criteria.andPasswordEqualTo
(user.getPassword());
List<User> list=userMapper
.selectByExample(userExample);
//判断集合
if (list !=null && list.size()>=1){
//返回集合中用户信息
User dbUser=list.get(0);
//设置密码为null
dbUser.setPassword("");
return dbUser;
}
//登录失败应该返回状态码
return null;//报500
}
//注册
@RequestMapping("/user/register")
//http://localhost:1314/user/register/?username=1&password=123
public String register(User user){
查询数据库,判断用户是否存在
UserExample userExample=new UserExample();
UserExample.Criteria criteria= userExample.or();
criteria.andPasswordEqualTo(user.getUsername());
List<User> list=userMapper.selectByExample(userExample);
if (list !=null && list.size()==0){
//用户名不存在,可以注册
int count=userMapper.insert(user);
if (count>=1){
return "注册成功";
}else {
return "注册失败";
}
}else {
return "用户名已经存在";
}
}
@RequestMapping("/test")
public List<User> test(){
return userMapper.
selectByExample(null);
}
}
Run As执行:
//http://localhost:1314/user/register/?username=1&password=123
新建一个商品类 CategoryController
3.查询所有分类
package com.tedu.mall.Controller;
import com.tedu.mall.mapper.CategoryMapper;
import com.tedu.mall.pojo.Category;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class CategoryController {
@Autowired
CategoryMapper categoryMapper;
//查询所有商品分类
@RequestMapping("/category/selectAll")
public List<Category> selectAll(){
return categoryMapper
.selectByExample(null);
}
}
Run As执行:
http://localhost:1314/category/selectAll
4.查询某个分类下的商品
item商品表有个category_id
new一个商品操作类 ItemController
package com.tedu.mall.Controller;
import com.tedu.mall.mapper.ItemMapper;
import com.tedu.mall.pojo.Item;
import com.tedu.mall.pojo.ItemExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
//商品操作
@RestController
public class ItemController {
@Autowired
ItemMapper itemMapper;
//查询分类下的所有商品
@RequestMapping("/item/findByCategoryId")
//http://localhost:1314/item/findByCategoryId?id=1
public List<Item> findByCategoryId(Integer id){
ItemExample itemExample=new ItemExample();
ItemExample.Criteria criteria=itemExample.or();
criteria.andCategoryIdEqualTo(id);
//得到一个集合,集合中放的是商品
List<Item> list=itemMapper.selectByExample(itemExample);
return list;
}
}
Run As执行:
//http://localhost:1314/item/findByCategoryId?id=1
据商品编号查询商品
package com.tedu.mall.Controller;
import com.tedu.mall.mapper.ItemMapper;
import com.tedu.mall.pojo.Item;
import com.tedu.mall.pojo.ItemExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
//商品操作
@RestController
public class ItemController {
@Autowired
ItemMapper itemMapper;
//首页显示商品,用户单击一个商品,显示商品详细
//根据商品编号查询商品
@RequestMapping("/item/findByItemId")
//localhost:1314/item/findByItemId?id=2
public Item findByItemId(Integer id){
Item item = itemMapper.selectByPrimaryKey(id);
return item;
}
//查询分类下的所有商品
@RequestMapping("/item/findByCategoryId")
//http://localhost:1314/item/findByCategoryId?id=1
public List<Item> findByCategoryId(Integer id){
ItemExample itemExample=new ItemExample();
ItemExample.Criteria criteria=itemExample.or();
criteria.andCategoryIdEqualTo(id);
//得到一个集合,集合中放的是商品
List<Item> list=itemMapper.selectByExample(itemExample);
return list;
}
}
Run As执行:
http://localhost:1314/item/findByItemId?id=2
管理员登录
package com.tedu.mall.Controller;
import com.tedu.mall.mapper.AdminMapper;
import com.tedu.mall.pojo.Admin;
import com.tedu.mall.pojo.AdminExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
//管理员登录
@RestController
public class AdminController {
@Autowired
AdminMapper adminMapper;
@RequestMapping("/admin/login")
public Admin login(Admin admin){
AdminExample adminExample=new AdminExample();
AdminExample.Criteria criteria= adminExample.or();
//增加两个条件
criteria.andAdminNameEqualTo(admin.getAdminName());
criteria.andAdminPasswordEqualTo(admin.getAdminPassword());
List<Admin> list=adminMapper.selectByExample(adminExample);
//添加判断条件
if (list !=null && list.size()>=1){
//登录成功,取出管理员信息
//调取数据库的Admin
Admin dbAdmin=list.get(0);
dbAdmin.setAdminPassword("");
return dbAdmin;
}
//应该返回状态码,登录失败后面内容的知识
return null;//这种方法可能会报500
}
}
Run As执行:
http://localhost:1314//admin/login?adminName=root&adminPassword=root
添加商品
在ItemController 中添加一个添加商品的方法
package com.tedu.mall.Controller;
import com.tedu.mall.mapper.ItemMapper;
import com.tedu.mall.pojo.Item;
import com.tedu.mall.pojo.ItemExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
//商品操作
@RestController
public class ItemController {
@Autowired
ItemMapper itemMapper;
//添加商品
@RequestMapping("/item/insert")
/*localhost:1314/intem/insert?categoryId=1&itemName=n1
*&itemImage=1.jpg&itemPrice=90
*&itemDesc=desc
*/
public String insert(Item item){
int count=itemMapper.insertSelective(item);
if(count >=1){
return "添加成功";
}else {
return "添加失败";
}
}
//首页显示商品,用户单击一个商品,显示商品详细
//根据商品编号查询商品
@RequestMapping("/item/findByItemId")
//localhost:1314/item/findByItemId?id=2
public Item findByItemId(Integer id){
Item item = itemMapper.selectByPrimaryKey(id);
return item;
}
//查询分类下的所有商品
@RequestMapping("/item/findByCategoryId")
//http://localhost:1314/item/findByCategoryId?id=1
public List<Item> findByCategoryId(Integer id){
//获取where条件
ItemExample itemExample=new ItemExample();
ItemExample.Criteria criteria=itemExample.or();
criteria.andCategoryIdEqualTo(id);
//得到一个集合,集合中放的是商品
List<Item> list=itemMapper.selectByExample(itemExample);
return list;
}
}
Run As执行:
http://localhost:1314/item/insert?categoryId=1&itemName=n1&itemImage=1.jpg&itemPrice=90
查询所有商品
package com.tedu.mall.Controller;
import com.tedu.mall.mapper.ItemMapper;
import com.tedu.mall.pojo.Item;
import com.tedu.mall.pojo.ItemExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
//商品操作
@RestController
public class ItemController {
@Autowired
ItemMapper itemMapper;
//查询所有商品
//http://localhost:1314//item/selectAll
@RequestMapping("/item/selectAll")
public List<Item> selectAll(){
return itemMapper.selectByExample(null);
}
//添加商品
@RequestMapping("/item/insert")
/*localhost:1314/intem/insert?categoryId=1&itemName=n1
*&itemImage=1.jpg&itemPrice=90&itemDesc=desc
*/
public String insert(Item item){
int count=itemMapper.insertSelective(item);
if(count >=1){
return "添加成功";
}else {
return "添加失败";
}
}
//首页显示商品,用户单击一个商品,显示商品详细
//根据商品编号查询商品
@RequestMapping("/item/findByItemId")
//localhost:1314/item/findByItemId?id=2
public Item findByItemId(Integer id){
Item item = itemMapper.selectByPrimaryKey(id);
return item;
}
//查询分类下的所有商品
@RequestMapping("/item/findByCategoryId")
//http://localhost:1314/item/findByCategoryId?id=1
public List<Item> findByCategoryId(Integer id){
//获取where条件
ItemExample itemExample=new ItemExample();
ItemExample.Criteria criteria=itemExample.or();
criteria.andCategoryIdEqualTo(id);
//得到一个集合,集合中放的是商品
List<Item> list=itemMapper.selectByExample(itemExample);
return list;
}
}
Run As执行:
http://localhost:1314//item/selectAll
删除商品
package com.tedu.mall.Controller;
import com.tedu.mall.mapper.ItemMapper;
import com.tedu.mall.pojo.Item;
import com.tedu.mall.pojo.ItemExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
//商品操作
@RestController
public class ItemController {
@Autowired
ItemMapper itemMapper;
//删除
@RequestMapping("/item/delete")
//localhost:1314/item/delete?itemId=5
public String delete(Integer itemId){
//delete from item where item_id=5
int count = itemMapper.deleteByPrimaryKey(itemId);
if (count>=1){
return "删除成功";
}else{
return "删除失败";
}
}
//查询所有商品
@RequestMapping("/item/selectAll")
public List<Item> selectAll(){
return itemMapper.selectByExample(null);
}
//添加商品
@RequestMapping("/item/insert")
/*localhost:1314/intem/insert?categoryId=1&itemName=n1
*&itemImage=1.jpg&itemPrice=90&itemDesc=desc
*/
public String insert(Item item){
int count=itemMapper.insertSelective(item);
if(count >=1){
return "添加成功";
}else {
return "添加失败";
}
}
//首页显示商品,用户单击一个商品,显示商品详细
//根据商品编号查询商品
@RequestMapping("/item/findByItemId")
//localhost:1314/item/findByItemId?id=2
public Item findByItemId(Integer id){
Item item = itemMapper.selectByPrimaryKey(id);
return item;
}
//查询分类下的所有商品
@RequestMapping("/item/findByCategoryId")
//http://localhost:1314/item/findByCategoryId?id=1
public List<Item> findByCategoryId(Integer id){
//获取where条件
ItemExample itemExample=new ItemExample();
ItemExample.Criteria criteria=itemExample.or();
criteria.andCategoryIdEqualTo(id);
//得到一个集合,集合中放的是商品
List<Item> list=itemMapper.selectByExample(itemExample);
return list;
}
}
Run As执行
//localhost:1314/item/delete?itemId=5
更新商品
package com.tedu.mall.Controller;
import com.tedu.mall.mapper.ItemMapper;
import com.tedu.mall.pojo.Item;
import com.tedu.mall.pojo.ItemExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
//商品操作
@RestController
public class ItemController {
@Autowired
ItemMapper itemMapper;
//更新商品
@RequestMapping("/item/update")
//http://localhost:1314/item/update?itemId=4
//&categoryId&itemName=华硕冰锐4
//&itemPrice=9999&itemDesc=3060Ti
//&itemImage=9.jpg
public String update(Item item){
//update item set item_name=新名字
//where item_id=4
int count=itemMapper.updateByPrimaryKey(item);
if (count>=1){
return "更新成功";
}else {
return "更新失败";
}
}
//删除
@RequestMapping("/item/delete")
//localhost:1314/item/delete?itemId=5
public String delete(Integer itemId){
//delete from item where item_id=5
int count = itemMapper.deleteByPrimaryKey(itemId);
if (count>=1){
return "删除成功";
}else{
return "删除失败";
}
}
//查询所有商品
@RequestMapping("/item/selectAll")
public List<Item> selectAll(){
return itemMapper.selectByExample(null);
}
//添加商品
@RequestMapping("/item/insert")
/*localhost:1314/intem/insert?categoryId=1&itemName=n1
*&itemImage=1.jpg&itemPrice=90&itemDesc=desc
*/
public String insert(Item item){
int count=itemMapper.insertSelective(item);
if(count >=1){
return "添加成功";
}else {
return "添加失败";
}
}
//首页显示商品,用户单击一个商品,显示商品详细
//根据商品编号查询商品
@RequestMapping("/item/findByItemId")
//localhost:1314/item/findByItemId?id=2
public Item findByItemId(Integer id){
Item item = itemMapper.selectByPrimaryKey(id);
return item;
}
//查询分类下的所有商品
@RequestMapping("/item/findByCategoryId")
//http://localhost:1314/item/findByCategoryId?id=1
public List<Item> findByCategoryId(Integer id){
//获取where条件
ItemExample itemExample=new ItemExample();
ItemExample.Criteria criteria=itemExample.or();
criteria.andCategoryIdEqualTo(id);
//得到一个集合,集合中放的是商品
List<Item> list=itemMapper.selectByExample(itemExample);
return list;
}
}
Run As执行:
http://localhost:1314/item/update?itemId=4&categoryId&itemName=华硕冰锐4&itemPrice=9999&itemDesc=3060Ti&itemImage=9.jpg
开始操作前端:前台主站的建设
HBuilder X
新建项目:projectWeb
拷贝两个文件放入项目
链接:https://pan.baidu.com/s/1H8974Kq6JmdGyb__uQvSDw
提取码:hmnq
分析:
新建一个html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
<!--axios:全称:AJAX input output system-->
<!--用来联网的,这里的写法是对ajax的封装-->
<script type="text/javascript" src="axios.min.js"></script>
</head>
<body>
<div id="app">
用户名:<input v-model="username" /><br />
密码:<input v-model="password " /><br />
确认密码<input v-model="confirmPassword" />
<button v-on:click="register">注册</button>
</div>
</body>
<script>
//配置对象
var config = {
el: "#app",
data: {
username: "",
password: "",
confirmPassword: ""
},
methods: {
register: function() {
//加断点查看是否执行
debugger;
//判断两个密码是否一致
if(this.password != this.confirmPassword){
window.alert("密码不一致");
return;
}
var serverUrl="http://localhost:1314/user/register?"
+"username="+this.username
+"&password="+this.password;
console.log(serverUrl);
}
}
}
//启动Vue
var vue = new Vue(config);
</script>
</html>
执行测试:
用axios联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
<!--axios:全称:AJAX input output system-->
<!--用来联网的,这里的写法是对ajax的封装-->
<script type="text/javascript" src="axios.min.js"></script>
</head>
<body>
<div id="app">
用户名:<input v-model="username" /><br />
密码:<input v-model="password " /><br />
确认密码<input v-model="confirmPassword" />
<button v-on:click="register">注册</button>
</div>
</body>
<script>
//配置对象
var config = {
el: "#app",
data: {
username: "",
password: "",
confirmPassword: ""
},
methods: {
register: function() {
//加断点查看是否执行
debugger;
//判断两个密码是否一致
if(this.password != this.confirmPassword){
window.alert("密码不一致");
return;
}
var serverUrl="http://localhost:1314/user/register?"
+"username="+this.username
+"&password="+this.password;
console.log(serverUrl);
//用axios联网
axiso.get(serverUrl)
.then()
.catch(function (e){
window.alert("联网失败");
console.log(e);
});
}
}
}
//启动Vue
var vue = new Vue(config);
</script>
</html>
Run AS执行
重点(跨域访问)
在localhost:8080访问localhost:1314
在javaScript中A网站不能联网访问B网站
比如localhost:8080不能访问支付宝。
为什么?
协议不一样:http://www.baidu.com https://www.baidu.com 域名相同但是,协议不同,不是同一个网站
端口号不一样:http://www.baidu.com:8080 http://www.baidu.com:1314 端口不一样,不是同一个网站
域名不一样:http://www.baidu.com http://www.google.com 不是同一个网站
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
<!--axios:全称:AJAX input output system-->
<!--用来联网的,这里的写法是对ajax的封装-->
<script type="text/javascript" src="axios.min.js"></script>
</head>
<body>
<div id="app">
用户名:<input v-model="username" /><br />
密码:<input v-model="password " /><br />
确认密码<input v-model="confirmPassword" />
<button v-on:click="register">注册</button>
</div>
</body>
<script>
//配置对象
var config = {
el: "#app",
data: {
username: "",
password: "",
confirmPassword: ""
},
methods: {
register: function() {
//加断点查看是否执行
debugger;
//判断两个密码是否一致
if(this.password != this.confirmPassword){
window.alert("密码不一致");
return;
}
var serverUrl="http://localhost:1314/user/register?"
+"username="+this.username
+"&password="+this.password;
console.log(serverUrl);
//用axios联网
axios.get(serverUrl)
.then(function(response){
debugger;
console.log(response);
})
.catch(function(e){
window.alert("联网失败");
console.log(e);
});
}
}
}
//启动Vue
var vue = new Vue(config);
</script>
</html>
run as执行
解决方法
@CrossOrigin //允许别的网站用js访问我
打开IDEA后端项目:
package com.tedu.mall.Controller;
import com.tedu.mall.mapper.UserMapper;
import com.tedu.mall.pojo.User;
import com.tedu.mall.pojo.UserExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class UserController {
//从spring ioc容器取接口的代理对象
@Autowired
UserMapper userMapper;
//登录
@RequestMapping("/user/login")
public User login(User user){
//where username= and password
UserExample userExample=new UserExample();
UserExample.Criteria criteria=
userExample.or();
criteria.andUsernameEqualTo(user.getUsername());
criteria.andPasswordEqualTo
(user.getPassword());
List<User> list=userMapper
.selectByExample(userExample);
//判断集合
if (list !=null && list.size()>=1){
//返回集合中用户信息
User dbUser=list.get(0);
//设置密码为null
dbUser.setPassword("");
return dbUser;
}
//登录失败应该返回状态码
return null;//报500
}
//注册
@RequestMapping("/user/register")
@CrossOrigin //允许别的网站用js访问我
//http://localhost:1314/user/register/?username=1&password=123
public String register(User user){
查询数据库,判断用户是否存在
UserExample userExample=new UserExample();
UserExample.Criteria criteria= userExample.or();
criteria.andPasswordEqualTo(user.getUsername());
List<User> list=userMapper.selectByExample(userExample);
if (list !=null && list.size()==0){
//用户名不存在,可以注册
int count=userMapper.insert(user);
if (count>=1){
return "注册成功";
}else {
return "注册失败";
}
}else {
return "用户名已经存在";
}
}
@RequestMapping("/test")
public List<User> test(){
return userMapper.
selectByExample(null);
}
}
给注册加上 @CrossOrigin注解
Run As重启服务器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
<!--axios:全称:AJAX input output system-->
<!--用来联网的,这里的写法是对ajax的封装-->
<script type="text/javascript" src="axios.min.js"></script>
</head>
<body>
<div id="app">
用户名:<input v-model="username" /><br />
密码:<input v-model="password " /><br />
确认密码<input v-model="confirmPassword" />
<button v-on:click="register">注册</button>
</div>
</body>
<script>
//配置对象
var config = {
el: "#app",
data: {
username: "",
password: "",
confirmPassword: ""
},
methods: {
register: function() {
//加断点查看是否执行
debugger;
//判断两个密码是否一致
if(this.password != this.confirmPassword){
window.alert("密码不一致");
return;
}
var serverUrl="http://localhost:1314/user/register?"
+"username="+this.username
+"&password="+this.password;
console.log(serverUrl);
//用axios联网
axios.get(serverUrl)
.then(function(response){
debugger;
console.log(response);
window.alert(response.data);
})
.catch(function(e){
window.alert("联网失败");
console.log(e);
});
}
}
}
//启动Vue
var vue = new Vue(config);
</script>
</html>
Run As启动:
新建一个login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
<script src="axios.min.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
用户名:<input v-model="username" /><br />
密码:<input v-model="password" /><br />
<button v-on:click="login">登录</button>
</div>
</body>
<script type="text/javascript">
var config = {
el:"#app",
data:{
username:"",
password:""
},
methods:{
login:function(){
debugger;
var serverUrl="http://localhost:1314/user/login?"
+"username="+this.username+
"&password="+this.password;
axios.get(serverUrl)
.then(function(response){
debugger;
var dbUser=response.data;
window.alert("联网成功,用户名id:"+dbUser.userId);
})
.catch(function(e){
window.alert("联网失败");
console.log(e);
});
}
}
}
var vue = new Vue(config);
</script>
</html>
Run As执行:又是之前的错误
和之前同理IDEA 给用户登录加上注解
package com.tedu.mall.Controller;
import com.tedu.mall.mapper.UserMapper;
import com.tedu.mall.pojo.User;
import com.tedu.mall.pojo.UserExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class UserController {
//从spring ioc容器取接口的代理对象
@Autowired
UserMapper userMapper;
//登录
@RequestMapping("/user/login")
@CrossOrigin
public User login(User user){
//where username= and password
UserExample userExample=new UserExample();
UserExample.Criteria criteria=
userExample.or();
criteria.andUsernameEqualTo(user.getUsername());
criteria.andPasswordEqualTo
(user.getPassword());
List<User> list=userMapper
.selectByExample(userExample);
//判断集合
if (list !=null && list.size()>=1){
//返回集合中用户信息
User dbUser=list.get(0);
//设置密码为null
dbUser.setPassword("");
return dbUser;
}
//登录失败应该返回状态码
return null;//报500
}
//注册
@RequestMapping("/user/register")
@CrossOrigin //允许别的网站用js访问我
//http://localhost:1314/user/register/?username=1&password=123
public String register(User user){
查询数据库,判断用户是否存在
UserExample userExample=new UserExample();
UserExample.Criteria criteria= userExample.or();
criteria.andPasswordEqualTo(user.getUsername());
List<User> list=userMapper.selectByExample(userExample);
if (list !=null && list.size()==0){
//用户名不存在,可以注册
int count=userMapper.insert(user);
if (count>=1){
return "注册成功";
}else {
return "注册失败";
}
}else {
return "用户名已经存在";
}
}
@RequestMapping("/test")
public List<User> test(){
return userMapper.
selectByExample(null);
}
}