Web项目开发基础

项目构建

                1,创建一个java项目

                2,为java项目添加web开发的能力

3,从tomcat目录下导入servlet-api的依赖包(使项目具备开发servlet的能力)

 4在/web/WEB-INF/下面创建lib包,导入其他相关依赖包,并且添加到工程中,lib包一定要放在WEB-INF下面

 commons-fileupload：文件上传

commons-io：通用的io流包，文件上传需要的

dom4j：构造xml的包

druid：数据库连接池的包

fastjson：阿里提供了json的构造解析包

jstl：Java servlet tag language 页面标签语言的包

standard：c标签标准库依赖的包

mysql-connector-java：数据库连接的驱动包

5将数据库连接配置和util都复制到项目中去

构建数据持久层

        可以使用数据库建模工具进行数据库设计

        使用Pdman(数据库建模工具)创建表的视图,并导出sql语句

        在idea连接数据库,执行sql语句

三层架构 

        数据库操作Dao层

                      在用idea的easy code 生成entity层

        可以使用扩展类继承实体类,扩展需要显示字段

                        VO:视图显示对象,在实体类的基础上扩充需要显示的字段

        业务逻辑service层

        视图servlet+jsp/ajax

                使用servlet数据json格式

        创建过滤器解决乱码问题

前端页面基本操作

        页面的主体内容是html语言标签

                table标签

                        整体是一个表格table

                           thead头部内容

                            tbody正文内容

                                tr是一行

                                td是单元格

                             tfoot是底部          

所有的标签有属性和内容

        input操作的是value属性

        其他标签操作的是内容

javascript是可以对页面元素进行操作的脚本代码

        随着js的发展js分为三个部分

                ECMAScript:脚本语法

                DOM:文档操作

                BOM:浏览器操作

通过js来实现点击事件

        方式一:在标签中直接关联点击事件的方法

                在html中实现标签

<button onclick="add()">添加数据</button>

        在javaScript实现方法

    <script>
        function add(){
          alert("响应的添加数据")
        }
    </script>

 方式2:通过js的dom操作实现点击事件

        在html中实现标签

   <input id="btn" type="button" value="input的按键">

通过dom操作绑定事件

//执行dom操作获取按键的对象
var btnDom = document.getElementById("btn");
//给对象绑定事件
btnDom.addEventListener('click',function(){
    alert("input绑定的方法")
})

js操作标签,获取标签的值,修改标签中的内容和属性

        获取input标签中的值

//获取input标签的对象
var userNameObject = document.getElementById("username");
//弹出input标签的值
alert(userNameObject.value)

获取其他标签的内容

var nameObject = document.getElementById("labelname");
//获取一般标签的内容
alert(nameObject.innerHTML);

通过js获取表单中的值,添加到表格内容中去

        //给对象绑定事件
        btnDom.addEventListener('click',function(){
            //获取表单中的值
            var sid = document.getElementById("sid").value;
            var username = document.getElementById("username").value;
            var age = document.getElementById("age").value;
            //给body标签中添加内容
            var tbody = document.getElementById("tbody");

            //使用了es6的语法
            //``可以拼接多行标签内容
            //在其中可以使用${}渲染js中的变量
            tbody.innerHTML += `
                 <tr>
                    <td>${sid}</td>
                    <td>${username}</td>
                    <td>${age}</td>
                 </tr>
            `
        })

ajax渲染页面

        可以直接使用一些对ajax封装好的前端框架(jquery,axios)进调用,

                使用jquery发送ajax请求

                        导入jquery.js

 <script src="js/jquery-3.4.1.min.js"></script>

发送ajax

//发送ajax请求
$.ajax({
    url:"shopping/list",//请求路径
    method:"GET", //请求方式
    success:function(res){//成功的回调方法
        //根据id找到body对象
        var tbody = document.getElementById("tbody");

        var content ='';
        //遍历返回的json数据
        //[{"pname":"电视剧","num":2,"pprice":1000.21,"pid":1,"sid":1}]
        for (i=0;i<res.length;i++){
            var obj = res[i];
            content+=`
				 		<tr>
						 <td><input name="pids" value="1" type="checkbox"/></td>
						 <td>${obj.pid}</td>
						 <td>${obj.pname}</td>
						 <td>${obj.pprice}</td>
						 <td><input type="text" size="3" name="nums" value="${obj.num}"/></td>
						</tr>
				 	`
        }
        //将内容放入到body中
        tbody.innerHTML = content;
    }
})