mybatis 的配置:
1、首先我门需要写一个数据源文件 ----》jdbc.properties
2、写mybatis 中心配置文件:(配置文件可以在网上找,根据自己的东西稍加修改就行)
下面是我根据自己的项目来改的配置文件
注意: 1,2,3
标1 : properties ->配置数据源
typeAliases --->配置别名 name= (实体类的路径 ): 作用体现映射mapper 文件中。
3,sql语句的映射文件
映射mapper 文件也可以在网上找,和mybatis在一个地方, 如下:
也要根据 自己的 项目进行改造,关于 文件的解释如下:
namespace -》 写的是 我mapper接口的路径
下面的 查询语句, id 对应mapper 接口的方法 ,必须要与方法名一致, resultType 是返回值类型 ,如过 配置别名在这里起作用 : 比如 我的实体类的路径是:cn.dxy.pojo,如果不配置别名,在resultTypen="cn.dxy.pojo.student" ,配置了别名就可以写成student 不用,或者Student 不(区别)大小写, 如下 根据我的项目需要写的curd。
映射文件需要有对应的接口类,代码内容:
<mapper namespace="cn.dxy.mapper.StudentMapper"> 我们需要定义一个接口StudentMapper.class ,写接口方法,不需要去新建一个类去实现这个接口, 获取数据库数据的步骤如下。
4、通过mybatis 获取数据库的数据
第一步:获取SqlSessionFactory 对象(在网页上有模板,参照上述网址)
第二步 获取SqlSession 对象 ,通过sqlSessionFactory 提供的openSession(true);
第三步:获取StudentMapper 实例, 实例对象可以的通过映射文件对数据库的方法进访问
mybatis的总结如上 :到这里我们就能从数据库获取数据了 ,接下来要做的是将数据放入到网页中去,
2、制作网页(使用bootstrap框架)
注: 很长一段时间 ,因该是没真正认识到前端框架之前,我一直多觉得写前端页面是靠自己一个个标签敲出来的,也正因为如词所以觉得前端非常的无聊,以至于很长一段时间抵触学习前端(简直傻逼)。
第一步使用bootStrap 的准备![](https://i-blog.csdnimg.cn/blog_migrate/3b5f614b62f989028b62cc93a916b864.png)
页面布局可以从官网上获取 ,官网如图:
根据需要复制代码,然乎根据自己的需要更改代码结构:
第二步 我们需要将查询到的学生列表展示在网页上,所有我们同过EL 表达式:代码如下
<c:forEach items="${studentList}" var="stu">
<tr>
<td>${stu.sid}</td>
<td>${stu.sname}</td>
<td>${stu.sex}</td>
<td>${stu.age}</td>
<td>${stu.addr}</td>
<td>${stu.cname}</td>
<td>
<a href="" class="btn btn-success btn-sm" onclick="updateUI(${stu.sid},'${stu.sname}','${stu.sex}',${stu.age},'${stu.addr}',${stu.cid})" data-toggle="modal" data-target="#myModal">修改</a>
<a href="" class="btn btn-danger btn-sm" onclick="delStudent(${stu.sid})"> 删除学生</a>
</td>
</tr>
</c:forEach>
通过这段代码可以将前端传过来的值通过foreach循环展示在网页上,
注意代码; 如何将值放到每一行 ${stu.sid} 还有关于函数的使用 :
第三步 :javascript 内容:
<script>
function delStudent(sid){
if (confirm("你真的要删除该学生")){
location.href = "/student?cmd=delete&sid="+sid;
}
}
function save(){
let sid =$("#sid").val() //获取sid的值
console.log("save",sid)
let url=""
if(sid){
url="/student?cmd=update"
}else{
url="/student?cmd=add"
}
//1.3 为表单的action属性赋值
document.forms[0].action = url;
//1.4 提交表单
document.forms[0].submit();
}
function addUI(){
// 根据id得到sid的值
$("#myTitle").html("添加学生")
// $("#sid").val() //为隐藏属性赋值
// $("#sname").val()
// $("#age").val()
// $("#addr").val()
// $("#cid").val()
// $("#sex1").prop("checked",true);
// $("#sex2").prop("checked",false);
//2.2 重置表单 上面是为每一个表单的对话框赋空值,reset() 方法一步到位
document.forms[0].reset();
}
function updateUI(sid,sname,sex,age,addr,cid){
//判断是否取到了值
console.log(sid,sname,sex,age,addr,cid);
//将值写入到对话框中
$("#sid").val(sid) //为隐藏属性赋值
$("#sname").val(sname)
$("#age").val(age)
$("#addr").val(addr)
$("#cid").val(cid)
if(sex=='男'){
$("#sex1").prop("checked",true);
}else{
$("#sex2").prop("checked",true);
}
$("#myTitle").html("修改学生")
}
这里面有 方法的申明 ,通过操作标签的属性,还有表单地址提交写道js代码中 等等 ,自己理解
注 :前端对我来说是比较薄弱的,所以对于操作网页文档 ,及js代码我首先回去记住如何去操作文本文档,所以我贴出来整个代码块。
到目前为止 ,数据库的数据已经能拿到了,前端页面也已经准备好了。我们需要将后端数据放入到前端页面中,需要个中间方,及 servlet
3、将数据库数据放入到前端页面: servlet (后续我们会是由springmvc 将servlet 替换掉)
/**
* @author: dxy
* @description:
* @Date:2021/11/18
*/
@WebServlet("/student")
public class StudentServlet extends HttpServlet {
private StudentService studentService;
private ClassesService classesService;
@Override
public void init() throws ServletException {
studentService = new StudentServiceImpl();
classesService = new ClassesServiceImpl();
}
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException {
//0. 处理post请求的中文乱码
req.setCharacterEncoding("UTF-8");
// 通过前端传过来的数据来判断用户的操作,获取到的是地址栏的数据
String cmd = req.getParameter("cmd");
if (cmd.equals("list")){
list(req, resp);
System.out.println("查询出来");
}else if(cmd.equals("update")){
System.out.println("更新");
update(req,resp);
}else if(cmd.equals("add")){
add(req,resp);
}else if(cmd.equals("delete")){
delete(req,resp);
}
}
// 获取学生列表通过el表达是中 注意 req.setAttribute("studentList",studentList); 要和前端
private void list(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//查询所有学生
List<Student> studentList= studentService.findAllStudent();
//将学生列表放到作用域中
req.setAttribute("studentList",studentList);
//查询班级列表
List<Classes> classesList= classesService.findAllClasses();
//将查询到班级列表放到作用域中
req.setAttribute("classesList",classesList);
//进行页面的转发
req.getRequestDispatcher("/WEB-INF/student/student.jsp").forward(req,resp);
}
//更新数据库中的信息
private void update(HttpServletRequest req, HttpServletResponse resp) {
// 创建Student对象来保存form表单的数据
Student student =new Student();
try {
//将前端获取到的关于学生的数据保存在Student对象中
BeanUtils.populate(student,req.getParameterMap());
studentService.updateStudent(student);
resp.sendRedirect("/student?cmd=list");
}catch (Exception e ){
e.printStackTrace();
}
}
private void delete(HttpServletRequest req, HttpServletResponse resp) throws IOException {
//获取前端数据(这个实在页面中的数据)
int sid =Integer.parseInt(req.getParameter("sid")) ;
System.out.println("sid = " + sid);
studentService.deleteStudent(sid);
resp.sendRedirect("/student?cmd=list");
}
private void add(HttpServletRequest req, HttpServletResponse resp) {
Student student =new Student();
try {
// 获取前端的数据保存在student的对象实例中
BeanUtils.populate(student,req.getParameterMap());
studentService.addStudent(student);
//重定向
resp.sendRedirect("student?cmd=list");
}catch (Exception e ){
e.printStackTrace();
}
}
注意的点
1、add()方法和update()方法获取前端表单数据使用的类和 类提供的方法,
2、转发重定向,
3、获取页面参数的值、和获取浏览器地址的参数,
4、 设置字符过滤器