文章目录

  • 管理系统
  • 1.前端介绍（h5,js,css，jQuery，ajax）
  • 2.springboot
  • 1).controller
  • 2).service/serviceImpl
  • 3).mapper,mapper.xml
  • 3.数据库（MySql）


管理系统


项目主要实现功能：用户登录、用户列表、用户的增删改查； （新手小白刚接触，做个总结）

1.前端介绍（h5,js,css，jQuery，ajax）

  • h5:页面各元素的显示；
  • css:页面的样式
  • => 这两者没有自己写，找个模板改的

js/jQuery: 给页面的元素增加上各种需要响应的事件：

常用页面响应事件（js）=>

  • 鼠标单击事件（ onclick ）
  • 鼠标经过事件（ onmouseover ）
  • 鼠标移开事件（onmouseout ）
  • 光标聚焦事件（ onfocus ）
  • 失焦事件（ onblur ）
  • 内容选中事件（ onselect ）
  • 文本框内容改变事件（ onchange ）

常用函数（jQuery）=>

  • 页面加载之后就会执行
    $(function () { ...... })
  • $加#获取页面中input（包括选中的选框内的）
    value id = $("#userId" ).val()
  • 内容获取/修改
    id = $("#userId" ).html("新值") //html页面所有内容 id = $("#userId" ).text("新值") //只获取文本内容如果不传入新值，那就那就是获取元素，否则就是对原来内容的覆盖

前后端数据传输（Ajax）=>

$.ajax({
        type:"post",
        url: /user/login,//后端请求的地址，/user=>一级地址  /login=>二级地址（之后写controller要一一对应起来）
        data:{//向后台传参数，参数之间用逗号隔开，
        "id":id,
        "username":username
        }
        dataType : "json",//传递的参数是json格式即key:value的样子，其中key，例如上边的“id”就是后端函数的对应参数
        async:false,//false:同步执行，true:异步执行
        success:function (data) {...}//后端的返回值是data,一般都是json格式
	 })

关于json

  • 创建一个json
    var jsonVar={}
  • 添加数据
    jsonVar["id"]=1 jsonVar["name"]="Ann"
  • 读取数据
    jsonVar["id"] 或者 jsonVar.id ==>两种方式，一种有引号，一种没有引号

2.springboot

1).controller

ajax向后端传入数据之后，controller中对数据进行接收。

@Controller==>controller类上面都要在上面加上这个注解
@RequestMapping("user")==>这个user对应ajax里的一级路径
public class UserController {
    @Autowired//请求service服务都要加上对应的注解
    UserService userService;
    @RequestMapping(value = "login", produces = "application/json; charset=utf-8")//value值就是前段ajax的二级路径，必须保持一致
    @ResponseBody
    public String login(User user){//一般和注解一样
        String res = userService.login(user);//请求service服务
        return res;//返回到前端
    }
}

==>

2).service/serviceImpl

controller请求service服务，service包括一个接口的java文件，和一个具体实现接口的java文件

  • 接口文件：
import com.cn.shixun.entity.User;//实体类，里面就是所有数据库的字段，以及逆向工程生成的get set 方法什么的
public interface UserService {
    public String login(User user);//单纯一个接口
}
  • 具体实现：
@Service//加service注解需要
public class UserServiceImpl implements UserService {
    @Autowired//之后需要查询向mapper请求服务，mapper通过sql语句对数据库进行操作，这里每一个mapper之前都要加注解！！！和上面的controller一样
    UserMapper userMapper;
    @Override//接口之后是对login的重写
    public String login(User user) {
        User u= userMapper.login(user);//调用mapper里面代码==>mapper要对数据库下手了
        Message msg = new Message("999","登录失败，请重新登录！");//message是自己定义的信息类
        if(u!= null){
            msg=new Message("200","登录成功");
        }
        return JSONObject.toJSONString(msg);//转化成json格式返回
    }
 }

3).mapper,mapper.xml

service请求mapper，mapper是一个接口，mapper.xml里面有sql语言

  • 接口文件 mapper.java
@Mapper//这里接口文件里需要加mapper注解，service文件是在具体文件里加注解
public interface UserMapper {
    User login(User user);//用户登录，service请求调用的那个函数
    
    int deleteByPrimaryKey(Integer id);

    int insert(User record);

    int insertSelective(User record);

    User selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(User record);

    int updateByPrimaryKey(User record);
}
  • 具体实现 mapper.xml
    通过不同的标签，里面写不同的功能

选择

<select id="login" parameterType="com.cn.shixun.entity.User" resultMap="BaseResultMap">//login就是函数名，parameterType是参数类型，resultMap是返回值类型
    select
    <include refid="Base_Column_List" />
    from user
    where username = #{username} and password = #{password}
    //标签里面就是原生的sql语句，username(这个是数据库里面的字段的名称) = #{username}（这个就是参数，需要和mapper一致，如果）
</select>

插入

<insert id="insert" parameterType="com.cn.shixun.entity.User">
    insert into user (id, username, password, 
      real_name, sex, sno, 
      admission_date, faculty_id, major_id, 
      class_id)
    values (#{id,jdbcType=INTEGER}, #{username,jdbcType=VARCHAR}, #{password,jdbcType=VARCHAR}, 
      #{realName,jdbcType=VARCHAR}, #{sex,jdbcType=VARCHAR}, #{sno,jdbcType=VARCHAR}, 
      #{admissionDate,jdbcType=TIMESTAMP}, #{facultyId,jdbcType=INTEGER}, #{majorId,jdbcType=INTEGER}, 
      #{classId,jdbcType=INTEGER})
</insert>

删除

<delete id="deleteByPrimaryKey" parameterType="java.lang.Integer">
   delete from user
   where id = #{id,jdbcType=INTEGER}
</delete>

3.数据库（MySql）

==> ALTER TABLE user MODIFY admission_date datetime(3) DEFAULT CURRENT_TIMESTAMP(3);//给字段更改默认值，这个是日期

loading。。。。。。。