• 【旅游网】前后端分离——用户管理

    1、先创建数据库，建立用户表
    在这里插入图片描述

    2、创建后端项目，这里使用Springboot，创建好controler、mapping、pojo、service四个文件，在实体里创建User类
    在这里插入图片描述

    package com.example.pjtest.Pojo;

public class User {
    public int id_u;
    public String pwd_u;
    public String name_u;
    public String sex_u;
    public String tel_u;

    public void setSex_u(String sex_u) {
        this.sex_u = sex_u;
    }

    public void setTel_u(String tel_u) {
        this.tel_u = tel_u;
    }

    public String getSex_u() {
        return sex_u;
    }

    public String getTel_u() {
        return tel_u;
    }

    public String getName_u() {
        return name_u;
    }

    public void setName_u(String name_u) {
        this.name_u = name_u;
    }

    public int getId_u() {
        return id_u;
    }

    public String getPwd_u() {
        return pwd_u;
    }

    public void setId_u(int id_u) {
        this.id_u = id_u;
    }

    public void setPwd_u(String pwd_u) {
        this.pwd_u = pwd_u;
    }

    @Override
    public String toString() {
        return "User{" +
                "id_u=" + id_u +
                ", pwd_u='" + pwd_u + '\'' +
                ", name_u='" + name_u + '\'' +
                ", sex_u='" + sex_u + '\'' +
                ", tel_u='" + tel_u + '\'' +
                '}';
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61

    3、在mapping层写入对用户操作的方法和对数据库操作的语句，用注释写就不用分成两个文件，如：

    在最上方写上@Mapper注解（目的就是为了不再写mapper映射文件），在方法里面直接用注解对应用户操作。

    package com.example.pjtest.Mapping;

import com.example.pjtest.Pojo.User;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface UserMapping {
    @Select("select * from users")
//    显示全部用户
    public List<User> selectUser();
    //    用户名查找用户
    @Select("select * from users where name_u=#{name_u}")
    List<User> selectUserbyNamed(String name_u);
//修改用户
    @Update("update users SET name_u=#{name_u},sex_u=#{sex_u},tel_u=#{tel_u} where id_u=#{id_u}")
    int alterUser(int id_u,String name_u,String sex_u,String tel_u);
//增加用户
@Insert("insert into users (name_u,pwd_u) values (#{name_u},#{pwd_u})")
public void addUser(String name_u,String pwd_u);
//按用户名和密码查找用户
    @Select("select name_u from users where name_u=#{name_u} and pwd_u =#{pwd_u}" )
//    String selectUserbyName(String name_u);
    User getlog(@Param("name_u")String name_u, @Param("pwd_u")String pwd_u);
//    用户名查找用户
@Select("select name_u from users where name_u=#{name_u}")
    User selectUserbyName(String name_u);
//按用户名查找用户密码
    @Select("select pwd_u from users  where name_u=#{name_u};")
    User selectPwdbyName(String name_u);
//按id删除用户
    @Delete("delete from users where id_u=#{id_u}")
    int delUser(int id_u);
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    4、在controller层写出对用户操作的方法

    在最上方写@Restcontroller（作用等同于@Controller + @ResponseBody。）
    在一个类上添加@Controller注解，表明了这个类是一个控制器类。这里省略对Controller注解的说明了。
    @ResponseBody表示方法的返回值直接以指定的格式写入Http response body中，而不是解析为跳转路径。
    @Autowired可以标注在属性上、方法上和构造器上，来完成自动装配，（当标注的属性是接口时，其实注入的是这个接口的实现类）
    @RequestMapping注解是一个用来处理请求地址映射的注解，可用于映射一个请求或一个方法，可以用在类或方法上。（在实际的开发当中，一个控制器中不一定只有一个方法，而这些方法都是用来处理请求的，通过 RequestMapping 注解来处理这些映射请求，也就是通过它来指定控制器可以处理哪些URL请求）

    package com.example.pjtest.Controller;

import com.example.pjtest.Mapping.UserMapping;
import com.example.pjtest.Pojo.User;
import com.example.pjtest.Service.UserService;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
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.io.IOException;
import java.util.List;

@RestController
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping("/user")
   public String UserTest(){
        return "vox akuma";
    }

    @RequestMapping("selectUser")
    public List<User> selectUser(){
        List<User> users=userService.selectUser();
//        System.out.println(users);
        return users;
    }

//    用户注册
    @RequestMapping("addUser")
    public int addUser(String name_u,String pwd_u){
//        System.out.println(name_u+pwd_u);
        userService.addUser(name_u,pwd_u);
        return 1;
    }

//    用户登录
    @RequestMapping("/logUser")
//    @CrossOrigin
    public int logUser(String name_u,String pwd_u,HttpServletResponse response){
        response.addHeader(  "Access-Control-Allow-Origin","*");//允许所有来源访同
        response.addHeader(  "Access-Control-Allow-Method","POST,GET");//允许访问的方式
        int a= userService.logUser(name_u,pwd_u);
//       if(a==1){
           logs(HttpServletRequest request, HttpServletResponse response);
//           return "/index";
//       }
//       else{
//           return "no";
//       }
//       open(a,response);
        return a;
    }
//@RequestMapping("ifopen")
//    public int open(int a,HttpServletResponse response){
//    response.addHeader(  "Access-Control-Allow-Origin","*");//允许所有来源访同
//    response.addHeader(  "Access-Control-Allow-Method","POST,GET");//允许访问的方式
//        if(a==1){
//            return 1;
//        }else
//            return 0;
//}
//    public void logUser(String name_u,String pwd_u){
//        int a= userService.logUser(name_u,pwd_u);
        if(a==1){
//           logs(HttpServletRequest request, HttpServletResponse response);
            return "/index";
        }
        else{
            return "no";
        }
//        open(a);
//    }
判断打卡页面
//    @RequestMapping("ifopen")
//    public int open(int a){
//                if(a==1){
           logs(HttpServletRequest request, HttpServletResponse response);
//            return 1;
//        }
//        else{
//            return 0;
//        }
//    }
//    public void logs(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        request.getRequestDispatcher("http://127.0.0.1:8020/UI/index.html").forward(request,response);
//    }


}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97

    5、在service层建立service接口，和service接口的实现类

    @Service注解用于类上，标记当前类是一个service类，加上该注解会将当前类自动注入到spring容器中

    package com.example.pjtest.Service;

import com.example.pjtest.Mapping.UserMapping;
import com.example.pjtest.Pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

public interface UserService {
    List<User> selectUser();

    void addUser(String name_u, String pwd_u);

  //  String logUser(String name_u, String pwd_u);

    // boolean logUser(String name_u, String pwd_u);

    int logUser(String name_u, String pwd_u);

    int delUser(int id_u);

    int alterUser(int id_u, String name_u, String sex_u, String tel_u);

    List<User> seleUserbyName(String name_u);

//    List<User> seleUserbyNamed(String name_u);


    @Service
    class userServicelmpi implements UserService{
        @Autowired
     private UserMapping usermapping;
     @Override
     public List<User> selectUser() {
         List<User> users=usermapping.selectUser();
         return users;
     }

//     用户名查询用户

        @Override
        public List<User> seleUserbyName(String name_u) {
            List<User> user=usermapping.selectUserbyNamed(name_u);
             return user;

     }

//        @Override
//        public List<User> seleUserbyNamed(String name_u) {
//            return usermapping.selectUserbyNamed(name_u);
//        }


//     用户修改

        @Override
        public int alterUser(int id_u, String name_u, String sex_u, String tel_u) {
            return usermapping.alterUser(id_u,name_u,sex_u,tel_u);
        }


//     用户登录

        @Override
        public int logUser(String name_u, String pwd_u) {
        User un= usermapping.selectUserbyName(name_u);
        User up= usermapping.selectPwdbyName(name_u);
            //System.out.println(un.name_u+up.pwd_u);
           String uname=un.name_u;
            String upwd=up.pwd_u;
//            System.out.println(uname+"vvv"+upwd);
            if(uname.equals(name_u)&&upwd.equals(pwd_u)){
                System.out.println("yes");
                return 1;
            }else
            {
                System.out.println("no");
                return 0;
            }
        }

//     用户注册
        @Override
        public void addUser(String name_u, String pwd_u) {
            usermapping.addUser(name_u,pwd_u);
        }
//       用户删除
        @Override
        public int delUser(int id_u) {
          return   usermapping.delUser(id_u);
        }
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95

    以上就是后端代码部分
    接下来是前端的代码
    1、创建用户登录页面，实现用户登录和注册的功能
    html代码：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录页面</title>
		<link href="css/login.css"  rel="stylesheet" type="text/css"  />
	<script type="text/javascript" src="js/login.js" ></script>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
<script>
	    $(function () {
        // 请将jQuery代码书写在这里 ...
        
//      alert('Hello,ailiaili!');
    });
	
</script>
	</head>
	<body>
		<div class="A">
		<div class="Bbox">
		<div class="login_box">
			<div class="context">
				<div class="box1">
				<h1>扫描二维码登录</h1>
				<div class="twod">
					<img src="img/二维码.png"/>
				</div>
				<p>请使用张家界旅游网客户端</p>
			</div>
			<div class="boxs"></div>
			<div class="box2">
				<h1><a id="pwds" onclick="logpwd()">密码登录</a> |<a id="msgs" onclick="logmsg()">短信登录</a> </h1>
				<form target="logf" class="log_form" action=" " method="post" id="loginform_pwd">
					<div class="input_sty">
						<label for="username">账号</label>
					<input name="name_u" id="user_id" class="input_context" type="text" placeholder="请输入账号"  />
					</div>
						<hr />
					<div class="input_sty">
						<label for="userpwd">密码</label>
					<input id="user_pwd" name='pwd_u' class="input_context2" type="password" placeholder="请输入密码"  />
					</div><a href="index.html">忘记密码</a>
					<input class="btn" id="submit2" type="" value="登录"  onmouseover="over2()"  onmouseout="out2()" onclick="op()"/>
					<input class="btn" id="submit1" value="注册" onclick="regs()" onmouseover="over1()"  onmouseout="out1()"/>
				</form>

				<form class="log_form" action="http://127.0.0.1:8088/logUser" method="post" id="loginform_msg">
					<div class="input_sty">
						<label for="username">手机号</label>
					<input name="name_u" id="user_id" class="input_context" type="text" placeholder="请输入手机号"  />
					</div>
						<hr />
					<div class="input_sty">
						<label for="userpwd">验证码</label>
					<input id="user_pwd" name='pwd_u' class="input_context2" type="password" placeholder="请输入验证码"  />
					</div>
					<div id="msg_but" type="button" onclick="msgis()">点击发送验证码</div>
					<input class="btn" id="submit3" type="submit" value="登录" onmouseover="over2()"  onmouseout="out2()"/>
					<input class="btn" id="submit4"  value="注册" onclick="regs()" onmouseover="over1()"  onmouseout="out1()"/>
				</form>

				<div class="other">
					<p>其他方式登录</p>
				<div class="other_context"><img src="img/微博图标2-2.jpg" />
				<a class="a_sty" href="">微博登录</a>
				</div>
				<div class="other_context">
					<img  src="img/微信图标2-2.jpg"/>
					<a class="a_sty" href="">微信登录</a></div>
				<div class="other_context">
					<img src="img/qq图标2-2.jpg" />
					<a class="a_sty" href="">QQ登录</a></div>
				</div>
				<div class="ps">
					<p>未注册过<span>张家界旅游网</span>的手机号，我们将主动帮您注册账号</p>
					<p>登录或完成注册即代表您同意<span>用户协定和隐私政策</span></p>
				</div>
			</div>

			</div>
			
		</div>
		<!--<div class="photo" >
				<img src="img/画板 1.png"  id="img1" />
				<img src="img/画板 2.png" id="img2"/>
			</div>
		<!--<div class="photo" id="img2">
				<img src="img/画板 1.png" id="img1" />
				<img src="img/画板 2.png" />
			</div>-->
			</div>
				<!--<iframe src="" frameborder="0" name="logf"></iframe>-->
			
			<div id="regform" class="reg">
				<form class="res_form" action="http://127.0.0.1:8088/addUser" method="post" id="regform_msg">
					<div class="input_sty">
						<label for="username">账号</label>
					<input name="name_u" id="user_id" class="input_context" type="text" placeholder="请输入手机号"  />
					</div>
						<hr />
					<div class="input_sty">
						<label for="userpwd">密码</label>
					<input id="user_pwd" name='pwd_u' class="input_context2" type="password" placeholder="请输入密码"  />
						<input class="btn" id="submit1" type="submit"  value="确定"/>
						<input class="btn" id="submit1" type="button" onclick="regx()" value="取消"/>
						
						<!--<button type="button" >X</button>-->
						
				</form>
			</div>
	
	</div>
			<!--<button onclick="test()">sadfsadfgds</button>-->
	</body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117

    这里的代码就不详细显示了，最主要的是，
    先看用户登录功能，在html中引入jquery（jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。）我是用了 form>表单，输入用户的账号和密码，用 在后端中，先在mapping层写select，查询从前端传送的用户账号在数据库中是否存在，然后查询用户密码是否和数据库中的相同，在controller层调用service层的方法，在service层判断用户，service层调用mapping层进行查询。

    fetch（‘url’,{
    method:‘’,
    mode:‘’
    }）.then(
    ).catch()

    $.ajax({
    url:
    type:
    dataType:
    success:function(data){}
    error:function(data){}
    })

    function log(){
		var id=document.getElementById("user_id").value;
		var pwd=document.getElementById("user_pwd").value;
		if(pwd==""||id==""){
		alert("用户或密码不能为空，请重新输入");
	}
$.ajax({
		url: "http://localhost:8088/logUser?name_u="+id+"&pwd_u="+pwd,
		type: "get",
		dataType: "json",
		success: function(data){
			console.log(data);
			if(data==1){
				alert("登录成功");
location.assign('http://127.0.0.1:8020/web_1/index.html');
}
		},
		error:function(data){
			alert("登录失败");
			location.reload();
		}
})
//window.open("index.html");
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    用户注册功能：
    在前端html文件中，用

    标签里分别是账号、密码，其中标签的属性 name，一定要和后端用户实体类的属性名字一致。

    <div id="regform" class="reg">
				<form class="res_form" action="http://127.0.0.1:8088/addUser" method="post" id="regform_msg">
					<div class="input_sty">
						<label for="username">账号</label>
					<input name="name_u" id="user_id" class="input_context" type="text" placeholder="请输入手机号"  />
					</div>
						<hr />
					<div class="input_sty">
						<label for="userpwd">密码</label>
					<input id="user_pwd" name='pwd_u' class="input_context2" type="password" placeholder="请输入密码"  />
						<input class="btn" id="submit1" type="submit"  value="确定"/>
						<input class="btn" id="submit1" type="button" onclick="regx()" value="取消"/>
						
						<!--<button type="button" >X</button>-->
						
				</form>
			</div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这里我做了一个admin管理页面，用来进行用户删除、修改和查询的功能。
    在这里插入图片描述
    先来说一下怎么把数据库的用户信息在前端页面上显示出来，
    建立好admin的html基本页面后，在js中，因为要求数据在页面打开时就显示出来，就让js文件中写window.onload（）函数，表示数据在页面打开时就加载，然后在这里方法中，使用$.ajax()进行前后端交互，当连接成功的时候，调用数据显示函数，将后端传回的信息打印出来。

    window.onload=function(){
	var shop_table=document.getElementById('admin_shop');
	shop_table.style.display='none';
		//连接后端显示数据
        $.ajax({
            url: "http://localhost:8088/abmin_alluser",//后台请求数据
            type: "post",//请求方式
            dataType: "json",//数据格式
            success: function(data){
                /*这个方法里是ajax发送请求成功之后执行的代码*/
 //数据展示
// console.log(data[0].id_u);
                showData(data);
    }）}
    //数据展示
    function showData(data) {
    	
          var str = "";//定义用于拼接的字符串
          for (var i = 0; i < data.length; i++) {
              //拼接表格的行和列
              str = ""id_u"+">" + data[i].id_u + ""+ data[i].name_u + "" + data[i].sex_u + "" + data[i].tel_u
              + "";
              //追加到table中
              $("#admin_user").append(str);   
          }
   
     }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    在后端直接在controller层调用service层的查询所有用户的方法，mapping层：

     @Select("select * from users")
//    显示全部用户
    public List<User> selectUser();

    • 1
    • 2
    • 3

    这样就会显示出来了，
    然后在前端数据显示函数中，每一条用户信息还增加了修改和删除按钮，然后来实现用户删除功能：
    同样要在window.onload（）函数中，获取所有的删除按钮，遍历每个删除按钮设置点击事件，当点击删除按钮时，获取该一行按钮的用户id，将用户id传送到后端。

  • 相关阅读:
    建造者模式
    《计算机操作系统-第一章》之操作系统概述
    十分钟了解MES系统的发展历程和标准体系
    深度学习实战57-pytorch框架搭建LSTM+CNN模型与实现时间序列的预测过程
    计算机毕业设计 基于SpringBoot的“漫画之家”系统的设计与实现 Java实战项目 附源码+文档+视频讲解
    postgresql之integerset
    如何使用 perf 分析 splice 中 pipe 的容量变化
    基于SpringBoot+Vue的搬家服务系统
    Python重要知识点filter_map_partial_reduce_sorted内置函数的使用方法
    02 C++ 变量和基本类型
  • 原文地址：https://blog.csdn.net/weixin_52078305/article/details/130901031