网站开发中遇到哪些问题,下载应用的app,phpcms v9,html网站发布1.创建项目 2.引入前端代码并检查是否有误 3.定义接口
需求分析 对于后端开发⼈员⽽⾔, 不涉及前端⻚⾯的展⽰, 只需要提供两个功能 1. 登录⻚⾯: 通过账号和密码, 校验输⼊的账号密码是否正确, 并告知前端 2. ⾸⻚: 告知前端当前登录⽤⼾. 如果当前已有⽤⼾登录, 返回登录的账…1.创建项目 2.引入前端代码并检查是否有误 3.定义接口
需求分析 对于后端开发⼈员⽽⾔, 不涉及前端⻚⾯的展⽰, 只需要提供两个功能 1. 登录⻚⾯: 通过账号和密码, 校验输⼊的账号密码是否正确, 并告知前端 2. ⾸⻚: 告知前端当前登录⽤⼾. 如果当前已有⽤⼾登录, 返回登录的账号, 如果没有, 返回空值
接⼝定义1. 校验接⼝ 请求路径/user/login 请求⽅式POST 接⼝描述校验账号密码是否正确 请求参数: 参数名类型是否必须备注userNameString是校验的账号passwordString是校验的密码 响应数据: Content-Type: text/html 响应内容: true //账号密码验证成功 false//账号密码验证失败 2. 查询登录⽤⼾接⼝ 请求路径/user/getLoginUser 请求⽅式GET 接⼝描述查询当前登录的⽤⼾ 请求参数: ⽆ 响应数据:Content-Type: text/html 响应内容: zhangsan 4.服务器代码
4.1 校验接口
package com.example.demo.controller;import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpSession;/*** Created with IntelliJ IDEA.* Description:* User: 吉祥瑞* Date: 2024-03-24* Time: 22:47*/
RestController
RequestMapping(/user)
public class LoginController {RequestMapping(/login)public boolean login(String userName, String password, HttpSession session){//1.校验获取参数是否为空//StringUtils.hasLength() 是Spring提供的⼀个⼯具⽅法, 判断字符串是否有值//字符串为null或者时, 返回false, 其他返回trueif(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){return false;}//2.校验session中是否有相应的数据if(userName.equals(userName)password.equals(password)){session.setAttribute(username,userName);return true;}return false;}
}
测试接口--利用postman 4.2 查询登录用户接口
RequestMapping(/getLoginUser)public String getLoginUser(HttpSession session) {//从Session中获取⽤⼾登录信息String userName(String) session.getAttribute(userName);//需要进行强转//如果⽤⼾已经登录, 则直接返回⽤⼾登录session不为空if (StringUtils.hasLength(userName)){return userName;}return ;} 测试成功
5.前后端交互
!DOCTYPE html
html langenheadmeta charsetUTF-8title登录页面/title
/headbodyh1用户登录/h1用户名input nameuserName typetext iduserNamebr密码input namepassword typepassword idpasswordbrinput typebutton value登录 onclicklogin()script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/scriptscriptfunction login() {$.ajax({url: /user/login,type: post,data: {userName: $(#userName).val(),password: $(#password).val()},success: function(result){if(result){location.href /index.html}else{alert(账号或密码有误请重新输入)}}})}/script
/body/html
先测试第一个页面前后交互是否正确
正确页面 错误警告 下面是欢迎界面
代码
!doctype html
html langenheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0meta http-equivX-UA-Compatible contentieedgetitle用户登录首页/title
/headbody登录人: span idloginUser/spanscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/scriptscript$.ajax({url: /user/getLoginUser,type: get,success: function(result){$(#loginUser).text(result);}})/script
/body/html 成功
