①JAVA项目实战：Vue+SSM+分类+商品(后台与跳转)

最新推荐文章于 2024-07-12 19:14:25 发布
最新推荐文章于 2024-07-12 19:14:25 发布
阅读量1k 收藏 4
点赞数 1
分类专栏： JAVA第二阶段 文章标签： java spring mybatis mysql spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ1043051018/article/details/112916044
版权

复习：

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.betweenBETWEEN
Restrictions.likeLIKE
Restrictions.inin
Restrictions.andand
Restrictions.oror
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);
    }
}

重启服务器

刷新login.html 输入user1

在这里插入图片描述

_淡若清风づ
关注
专栏目录
Vue+SSM 案例
尘迦子的博客
12-29 1389
Vue+SSM 案例 实现功能：用户的查询和修改 1.准备数据库 DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `age` int(11) DEFAULT NULL, `username` varchar(20) DEFAULT NULL, `PAS...
SSM + Vue（案例第十一课）
06-30
零基础、前后端一体、SSM、Vue、添加、修改、删除、查询、搜索、分页、上传、下载、导入、导出
基于ssm+vue的购物商场的设计与实现
最新发布
weixin_mtyeducation
07-12 285
本系统项目代码工整，结构清晰，适合选题：Java、JavaWeb、购物商场、商城、前后端分离等。系统采用ssm+vue整合开发，前端主要使用了element-ui框架、项目后端主要使用了ssm，数据层采用mybatis。
SSM + Vue（案例第十课）
06-30
零基础、前后端一体、SSM、Vue、添加、修改、删除、查询、搜索、分页、上传、下载、导入、导出
ssm+vue项目实战
11-21
vue实战项目，前端框架使用vue+bootstrap，后端框架使用的是spring+springmvc+mybatis，数据库使用mysql，包含全套代码
ssm项目与vue接口整合以及vue中session安全路由跳转
weixin_43795840的博客
11-20 778
ssm架构和vue的创建这里就不介绍了，主要分析vue跨域调用ssm。 1.普通spring boot项目整合vue很方便，只需配置vue的src目录下config下的index.js文件如下： module.exports = { dev: { // Paths 后端跳转地址设置 assetsSubDirectory: 'static', assetsPublicP...
SSM+Vue项目实战-寝室管理系统的Java毕业设计(源码+说明+录像).zip
07-05
SSM+Vue项目实战-寝室管理系统的Java毕业设计(源码+说明+录像).zip 【项目技术】 开发语言：Java 框架：ssm+vue 架构：B/S 数据库：mysql 【实现功能】 主要使用者分为管理员、宿舍长和学生。 实现功能包括管理员...
SSM+Vue项目实战-网上租车系统的Java毕业设计(源码+说明+录像).zip
07-05
SSM+Vue项目实战-网上租车系统的Java毕业设计(源码+说明+录像).zip 【项目技术】 开发语言：Java 框架：ssm+vue 架构：B/S 数据库：mysql 【实现功能】 主要功能包括管理员：首页、个人中心、用户管理、汽车类型...
SSM+Vue项目实战-大学生兼职跟踪系统的Java毕业设计(源码+说明).rar
07-06
SSM+Vue项目实战-大学生兼职跟踪系统的Java毕业设计(源码+说明).rar 【项目技术】 开发语言：Java 前端：vue 框架：ssm 架构：B/S 数据库：mysql 【实现功能】 主要实现功能包括：管理员：首页、个人中心、商家管理...
SSM+Vue项目实战-房屋租赁系统求租合同的Java毕业设计(源码+说明).rar
07-06
SSM+Vue项目实战-房屋租赁系统求租合同的Java毕业设计(源码+说明).rar 【项目技术】 开发语言：Java 前端：vue 框架：ssm 架构：B/S 数据库：mysql 【实现功能】 主要包括管理员和租户、前台首页功能。 管理员实现...
基于ssm+vue的游戏后台系统.zip
04-05
这是一个基于SSM（Spring、SpringMVC、MyBatis）框架和Vue.js前端技术实现的游戏后台系统的项目。SSM是Java领域中常见的企业级应用开发框架组合，而Vue.js则是一种轻量级、高效的前端MVVM框架，适用于构建用户界面。...
SSM项目整合案例
08-24
简单SSM项目整合，用SSM框架实现用户表的增，删，改 ，查，用到AOP面向切面事务，事务 ， 以及事务通知，SpringMVC定时器 ，dataSource配置，注解。
Vue SSM搭建一个简单的Demo前后端分离含增删改查(CRUD)、分页、批量功能
年轻的心跳
08-10 7945
Vue SSM搭建一个简单的Demo前后端分离含增删改查(CRUD)、分页、批量功能 前言 最近想复习一下SSM，所以就搭建了这个小DEMO，轻车熟路，个人认为在只用到SSM框架的前提下，这样做是最简洁的搭建方式了。写这篇博客也是复习的一部分，也想收获些意料之外的XXXX。 用到的技术和开发工具 前端 开发工具：WebStorm 开发框架：vue + axios + elementUI 包管理工具: npm 打包工具：webpack 后端 开发工具：IDEA 开发框架：springMVC + spri
Vue+SSM实现简单的增删查改
qq_44505797的博客
06-19 2350
开发工具与关键技术： Java、Vue 作者：肖广斌 撰写时间：2021年6月18日 SSM我们应该都已经很熟悉了，那在使用Vue之前，我们需要对Vue有一定的了解，才能实现我们对数据处理的操作。 下面地址是我对vue整理的一些基础： https://blog.csdn.net/qq_44505797/article/details/113813413 首先我们需要了解的是vue常用的语法指令：v-model、v-on、v-for等指令，以及插值表达式 {{变量名}} v-model：双向绑定，视图（vie
java添加功能怎么写_Java SSM框架如何添加写日志功能
weixin_29932613的博客
02-19 113
前提：要导入log4j的jar包在web.xml中输入：log4jConfigLocation/WEB-INF/log4j.propertiesorg.springframework.web.util.Log4jConfigListener在下面添加一个配置文件，名为：log4j.properties文件内容为：#log level DEBUG/INFO/WERN/ERROR/FATALlog4j...
SSM+vue基础项目从零开始练习前端1
qq_42689918的博客
03-27 1012
1、登陆码云，选择右上角的“+”按钮，选择新建仓库： 仓库地址https://gitee.com/shgm/ydl_wssm.git 3、使用git命令克隆我们的仓库至本地： 我的仓库命令如下： git clone https://gitee.com/shgm/ydl_wssm.git 可以新增一个.gitignore文件 ...
SSM+vue基础项目从零开始练习后端搭建
qq_42689918的博客
03-28 4180
创建后端项目 1、搭建maven工程 直接把项目建立在仓库的根目录即可，当然我们也可以创建两个仓库，一个前端项目仓库，一个后端项目仓库： 删除父工程下的src 调整工程结构 2、调整工程结构 创建子工程 system-adimin，删除掉父工程的src，将父工程的pom文件中的packaging改为pom，声明为一个父工程： 3、配置tomcat 4、加入以下依赖 在父工程中加入以下依赖，进行依赖管理，每一个依赖的作用不在赘述，这是基本的ssm...
毕业设计 40个SSM+VUE毕设项目分享【源码+论文】（一）
loop_yang123的博客
02-06 835
🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升，传统的java web缺少创新和亮点，往往达不到毕业答辩的要求，这两年不断有学弟学妹告诉学长自己做的java web管理系统达不到老师的要求。为了大家能够顺利以及最少的精力通过毕设，学长分享5个优质ssm+vue毕业设计项目，需要的自取。课题1 : 基于SSM与VUE的旅游信息分享管理平台🥇 题目综合评分(每项满分5分)难度系数：3分工作量：5分创新点：3分界面美化：5分开发语言：Java框架：ssmJDK版本：JDK1.8。
基于SSM+vue的前后端分离小项目（用户后台管理系统的实现）
qq_41986840的博客
01-24 8131
本篇博客将介绍现今主要流行的前后端分离方式构建管理系统的实现 项目搭建环境： windows系统 服务器：Tomcat 9.0 项目运行环境：JDK1.8 前端主要技术：HTML、CSS、VUE前端框架、axios异步处理 服务器端主要技术： Spring、SpringMvc、mybatis 数据库：Mysql 5.5 构建管理工具：Maven 开发工具：SQLyog、IntelliJ IDE...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值