dw做的网站不显示万网官网域名查询

当前位置： 首页 > news >正文

dw做的网站不显示,万网官网域名查询,东城网站建设工作室,电商网站建设公司文章目录 一、实操注意点1.1 代码修改重启问题1.2 Smart Tomcat的日志1.3 如何处理错误 一. 抓自己的包二、构造一个重定向的响应#xff0c;让页面重定向到百度主页三、让服务器返回一个html数据四、表白墙4.1 约定前后端数据4.2 前端代码4.3 后端代码4.4 保存在数据库的版本… 文章目录 一、实操注意点1.1 代码修改重启问题1.2 Smart Tomcat的日志1.3 如何处理错误 一. 抓自己的包二、构造一个重定向的响应让页面重定向到百度主页三、让服务器返回一个html数据四、表白墙4.1 约定前后端数据4.2 前端代码4.3 后端代码4.4 保存在数据库的版本 一、实操注意点 1.1 代码修改重启问题 编写Servlet程序时无论是修改前端还是后端代码都需要重新启动服务器 后端Java代码需要重启来重新编译前端的静态页面可能会被Tomcat给提前加载并缓存在内存中如果不重启修改的前端代码可能不会同步到内存中 1.2 Smart Tomcat的日志 Smart Tomcat为了开发方便将日志直接显示到了IDEA窗口里并没有专门生成日志文件 因为开发阶段日志只是起到调试作用需要反复修改代码等到程序发布就一定要把日志保存到文件中此时日志是记录了服务器的运行状态 1.3 如何处理错误 判断前端 or 后端问题通过fidder抓包判断 如果抓包发现 ajax 的http请求根本没发出来那大概率就是前端问题如果ajax的http请求发了且内容符合要求那大概率是后端问题 处理前端问题去浏览器的开发者工具上看不要看VSCode里的前端代码因为js代码都是被下载到浏览器后执行的 F12或右键检查打开开发者工具source部分表示了当前浏览器加载了哪些前端代码JS代码编译问题JS代码在执行过程中并不像Java有先编译的过程而是直接去执行语法错误也只有运行过程中才能发现。一旦执行过程中出现错误后续的代码就不能继续执行了。
一. 抓自己的包 思路调用 req 的各个方法, 把得到的结果汇总到一个 StringBuilder/StringBuffer 中, 统一返回到页面上为什么换行用 br 而不是\n该内容是在浏览器上按照 html 的方式来展示的、 /n是字符的换行符而非HTML的换行符关于乱码问题字符集不匹配IDEA多是使用utf8编码浏览器则默认跟着操作系统走Windows操作系统的编码位gbk注意实际开发中我们多用 fidder 进行抓包 WebServlet(/request) public class RequestServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//必要的显式告诉浏览器, 你拿到的数据是 htmlresp.setContentType(text/html);StringBuilder respBody new StringBuilder();respBody.append(req.getProtocol());respBody.append(br);respBody.append(req.getMethod());respBody.append(br);respBody.append(req.getRequestURI());respBody.append(br);respBody.append(req.getContextPath());respBody.append(br);respBody.append(req.getQueryString());respBody.append(p下面是枚举的/p);EnumerationString headers req.getHeaderNames();while (headers.hasMoreElements()){String header headers.nextElement();respBody.append(header : req.getHeader(header));respBody.append(br);}resp.getWriter().write(respBody.toString());} }二、构造一个重定向的响应让页面重定向到百度主页 方法一setHeader() setStatus() 原理 这段代码将会涉及两个请求一个是req一个是“访问百度主页”的请求。浏览器看到【302location】字段就知道要执行跳转操作了 location用该属性描述重定向到哪个地方301 VS 302 相同点直观效果差不多事实上3开头的效果都差不多不同点 301 —–永久重定向以后一直重定向 302 —–临时重定向以后可能不重定向了或者重定向到其他地方 永久重定向 VS 临时重定向在浏览器上可能会有些不同但这些不同的设计是设计者的初心实际开发中程序员并不会刻意区分 不同的浏览器对待永久重定向首次访问后会搞一个缓存后续直接访问缓存。如果是临时重定向就是每次都去服务器那请求一下
WebServlet(/trans) public class ServletTest extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setStatus(302);resp.setHeader(location, https://www.baidu.com);} }写法二resp.sendRedirect(String location)做了写法一的两个代码的工作 三、让服务器返回一个html数据 关于字符编码问题 修改原则更改浏览器的编码方式 因为 uft8 是更主流的编码方式gbk只能表示简体中文是无法表示其他例如方言的文字的如何查看并修改IDEA的字符集setting —- encoding 让浏览器更改字符集 请求的字符集取决于页面而 html 有声明字符集的部分。 meta charset “UTF-8”使用resp进行更改。要注意顺序先header后body因为一旦开始设置 body 此时就相当于header和status都定性了后续即使是修改了也无法生效。
WebServlet(/getHtml) public class HTMLTest extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType(text/html; charsetutf8);resp.getWriter().write(div你好/div);} }四、表白墙 4.1 约定前后端数据 概念 指进行前后端交互接口的约定比如前端发送什么样的请求后端返回什么样的响应前后端数据交互的格式可以随便约定但双方一定要互相遵守 请求的格式“路径是什么” 以及 “传来的数据格式是xml还是JSON”响应的格式返回的数据格式是什么状态码是什么 4.2 前端代码 放前端页面放到webapp目录下可通过网络访问如127.0.0.1:8080/test/messageWall.html获取到输入框的内容: 选中元素使用querySelector()、querySelectorAll()方法这些是由浏览器提供的API可以用来获取到页面的元素。如 let button document.querySelector(‘#submit’);确认行为 JS中函数是可以像变量一样复制的这里相当于是把这个函数定义出来后就赋值给button.onclick()触发时机当按钮被点击时触发该函数相当于是个回调函数
button.onclick function() {XXXXX}构造js对象 1js对象也是由{}构成的键值对JSON就是出自这里 2关于引号的问题key都是字符串类型value则可以是任何类型由于key必须是字符串所以key这里的引号是可以省略的。但是省略之后容易看不出原本是什么类型的了所以最好还是加上。 let body { let body {//简化版本该情况表示键值对和value是一样的from: from, from,to: to, to,message: msg msg }; };构造标签 创建标签let rowDiv document.createElement(‘div’); 创建一个div标签给该标签设置一个类rowDiv.className ‘row message’;往标签里构造内容rowDiv.innerHTML from ’ 对 ’ to ’ 说: ’ msg;把该标签放到其他标签之后containerDiv.appendChild(rowDiv);把该变量放到containerDiv这个对象的末尾 前后端交互、ajax方法会更具输入的参数构造出http请求并发给服务器、但原生的API比较难用我们一般使用JQuery封装过后的API 导入JQuery依赖 搜索【JQuery cdn】把 scriot整个标签赋值过来即可如 script src“https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js” 前端加载某个第三方库的方式很简单直接把库对应的网络地址加进来即可 success: function(body)这个body参数实际上包含了从服务器返回的响应数据。当前端成功接收到响应时调用这个函数。JS对象和JSON对象互转 JS对象虽然格式上和JSON非常相似但是仍然是两个不同的东西 JS对象 — JSON字符串JSON,stringify()JSON字符串 — JS对象JSON.parse() JQuery的自动转换问题 JQuery 见到响应中的 application/json , 就会自动的把响应转换成 js 对象数组故此时的body 是 js 对象数组而不是 json 字符串了。我们也就可以直接按照数组的方式来操作 body,每个元素都是 js 对象 关于url的值相对路径方式比较常见因为后续修改 contextPath 比较方便可以减少耦合 绝对路径写法以“/”开头如‘/test/massage’相对路径写法不以“/”开头如‘massage’。相对路径的基准是当前html所在的路径。当前html的路径是“test/messageWall.html”
//发送一个HTTP请求\(.ajax({});script srchttps://cdn.staticfile.org/jquery/1.10.2/jquery.min.js/scriptscriptlet containerDiv document.querySelector(.container);let inputs document.querySelectorAll(input);let button document.querySelector(#submit);button.onclick function() {// 1. 获取到三个输入框的内容let from inputs[0].value;let to inputs[1].value;let msg inputs[2].value;if (from || to || msg ) {return;}// 2. 构造新 div//相当于div/divlet rowDiv document.createElement(div);//相当于div class row message/divrowDiv.className row message;//相当于div className row message构造的内容/divrowDiv.innerHTML from 对 to 说: msg;//让创建出来的div加入到页面中containerDiv.appendChild(rowDiv);// 3. 清空之前的输入框内容for (let input of inputs) {input.value ;}//4. 把用户输入的数据发送给服务器let body {from: from,to: to,message: msg};\).ajax({type: post,url: message,contentType: application/json; charsetutf8,data: JSON.stringify(body),success: function(body){//这里是把返回的结果打印到了前端的控制台处console.log(body);}});}$.ajax({type: get,url: message,success: function(body){let container document.querySelector(.container);for (let i 0; i body.length; i){let message body[i];let div document.createElement(div);div.className row;div.innerHTML message.from 对 message.to 说 message.message;container.appendChild(div);}}})/script4.3 后端代码 引入Jackson依赖把数据存储在服务器中 内存 创建一个ArrayList把数据都存到这个顺序表中。当把List/数组转成JSON时Jackson会自动将其整理成JSON数组里面的每个元素也会被转换成JSON对象注意此处是把数据保存到内存中一旦重启服务器内存数据就无了。 数据库把数据保存到数据库中实现持久化保存
class Message{public String from;public String to;public String message;Overridepublic String toString() {return super.toString();} }WebServlet(/message) public class MessageWall extends HttpServlet {private ObjectMapper objectMapper new ObjectMapper();private ListMessage messageList new ArrayList();Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String respJson objectMapper.writeValueAsString(messageList);resp.setContentType(application/json; charsetutf8);resp.getWriter().write(respJson);}Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {Message message objectMapper.readValue(req.getInputStream(), Message.class);messageList.add(message);System.out.println(服务器收到message message);resp.setStatus(200);resp.getWriter().write(ok);} }4.4 保存在数据库的版本 引入数据库的依赖之前是直接下载Mysql驱动包现在也可以直接使用Maven进行管理创建数据库和数据表通过JDBC代码来操作数据库 WebServlet(/messageWall) public class MessageServlet extends HttpServlet {ObjectMapper objectMapper new ObjectMapper();Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {Message message objectMapper.readValue(req.getInputStream(), Message.class);try {add(message);} catch (SQLException e) {throw new RuntimeException(e);}System.out.println(服务器收到message message);resp.setStatus(200);resp.getWriter().write(ok);}private void add(Message message) throws SQLException {DataSource dataSource new MysqlDataSource();((MysqlDataSource)dataSource).setURL(jdbc:mysql://127.0.0.1:3306/test?characterEncodingutf8useSSLfalse);((MysqlDataSource)dataSource).setUser(root);((MysqlDataSource)dataSource).setPassword(123456);Connection connection dataSource.getConnection();String sql insert into message values(?, ?, ?);PreparedStatement statement connection.prepareStatement(sql);statement.setString(1, message.from);statement.setString(2, message.to);statement.setString(3, message.message);statement.executeUpdate();statement.close();connection.close();}Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {ListMessage messageList null;try {messageList load();} catch (SQLException e) {throw new RuntimeException(e);}resp.setContentType(application/json);String ret objectMapper.writeValueAsString(messageList);resp.getWriter().write(ret);}public ListMessage load() throws SQLException {DataSource dataSource new MysqlDataSource();((MysqlDataSource)dataSource).setURL(jdbc:mysql://127.0.0.1:3306/test?characterEncodingutf8useSSLfalse);((MysqlDataSource)dataSource).setUser(root);((MysqlDataSource)dataSource).setPassword(123456);Connection connection dataSource.getConnection();String sql select * from message;PreparedStatement statement connection.prepareStatement(sql);ResultSet resultSet statement.executeQuery();ListMessage messageList new ArrayList();while (resultSet.next()){Message message new Message();message.from resultSet.getString(from_user);message.to resultSet.getString(to_user);message.message resultSet.getString(message);messageList.add(message);}resultSet.close();statement.close();connection.close();return messageList;} }