Web | Kennem's Blog

HTML 字体

HTML 字体一. 通用字体家族 1.1 Serif（衬线字体）常用示例：Times New Roman、Georgia、Garamond、Palatino Linotype、Book Antiqua ...

黑马头条（6）

黑马头条（6） Kafka概述消息中间件建议 Kafka 追求高吞吐量，适合产生大量数据的互联网服务的数据收集业务 RocketMQ 可可靠性要求很高的金融互联网领域，稳定性高，经历了多次阿里双11考验 RabbitMQ 性能较好，社区活跃度高，数据量没有那么大，优先选择功能比较完备的RabbitMQ Kafka是一个分布式流媒体平台，类似于消息队列或企业消息传递系统 ...

黑马头条（5）

黑马头条（5）文章定时发布延迟任务 DelayQueue JDK自带 DelayQueue 是一个支持延时获取元素的阻塞队列，内部采用优先队列 PriorityQueue 存储元素，同时元素必须实现Delayed接口；在创建元素时可以指定多久才可以从队列中获取当前元素，只有在延迟期满时才能从队列中提取元素。 ...

黑马头条（4）

黑马头条（4）自媒体文章审核文章数据流审核方式自动审核文章发布之后，系统自动审核，主要是通过第三方接口对文章的内容进行审核（成功、失败、不确定）人工审核待自动审核返回不确定信息时，转到人工审核，由平台管理员进行审核 ...

黑马头条（3）

黑马头条（3）自媒体素材管理素材管理-图片上传图片上传路径：实现代码: 通过ThreadLocal获取用户ID WmThreadLocalUtil src/main/java/com/heima/utils/thread/WmThreadLocalUtil.java public class WmThreadLocalUtil { private final static ThreadLocal<WmUser> WM_USER_THREAD_LOCAL = new ThreadLocal<>(); // 存入线程 public static void setUser(WmUser wmUser){ WM_USER_THREAD_LOCAL.set(wmUser); } // 从线程中获取 public static WmUser getUser(){ return WM_USER_THREAD_LOCAL.get(); } // 清理 public static void clear(){ WM_USER_THREAD_LOCAL.remove(); } } WmTokenInterceptor 定义拦截器 public class WmTokenInterceptor implements HandlerInterceptor { /** * 得到header中的用户信息后，并存入到当前线程中 * @param request * @param response * @param handler * @return * @throws Exception */ @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String userId = request.getHeader("userId"); if (userId != null) { WmUser wmUser = new WmUser(); wmUser.setId(Integer.valueOf(userId)); WmThreadLocalUtil.setUser(wmUser); } return true; } /** * 清理线程中的数据 * @param request * @param response * @param handler * @param modelAndView * @throws Exception */ @Override public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception { WmThreadLocalUtil.clear(); } } WebMvcConfig 添加拦截器 ...

黑马头条（2）

黑马头条（2）表结构分析 ap_article 文章基本信息表 ap_article_config 文章配置表 ap_article_content 文章内容表三张表关系分析从业务角度分析如何分表滚屏分页的逻辑表的拆分-垂直分表垂直分表：将一个表的字段分散到多个表中，每个表存储其中一部分字段。 ...

黑马头条（1）

黑马头条（1）微服务架构开发 Springboot Spring cloud Nacos Nacos 是一个由阿里巴巴开源的服务管理平台，专门用于微服务架构中的服务发现、配置管理和动态 DNS 服务。环境搭建目标：接口测试工具及前后端联调类似今日头条 ...

Java Web开发(7)

Java Web开发(7) Spring原理配置优先级 SpringBoot中支持三种格式配置文件的优先级 properties yaml yml 配置 SpringBoot除了支持配置文件属性配置，还支持Java系统属性和命令行参数的方式进行属性配置 ...

Java Web开发(6)

Java Web开发(6) 事务：事务是一组操作的集合，它是一个不可分割的工作单位，这些操作要么同时成功，要么同时失败 start transaction / begin commit rollback Spring事务管理 @Transactional 位置：业务（service）层的方法上、类上、接口上作用：将当前方法交给spring进行事务管理，方法执行前，开启事务；成功执行完毕，提交事务；出现异常，回滚事务。事务属性 ...

Java Web开发(5)

Java Web开发(5) MyBatis MyBatis是一款优秀的持久层框架，用于简化JDBC的开发。使用Mybatis查询所有用户数据创建SpringBoot工程，数据库表user，实体类User ...

Java Web开发(3)

Java Web开发(3) Maven Maven是一款管理和构建java项目的工具依赖管理统一的项目结构项目构建 <maven.compiler.source>11</maven.compiler.source> <maven.compiler.target>11</maven.compiler.target> MVN坐标 Maven中的坐标是资源的唯一标识，通过该坐标可以唯一定位资源位置使用坐标来定义项目或引入项目中所需要的依赖 Maven的坐标主要组成 ...

Java Web开发(4)

Java Web开发(4) 数据库数据库：DataBase(DB) ，是存储和管理数据的仓库 DBMS， SQL MySql登录，首先在服务中启动mysql mysql -uroot -p"password" 或者 mysql -uroot -p 之后输入密码 ...

Java Web开发(1)

Java Web开发(1) 什么是Web？ Web：全球广域网，也成为万维网（World Wide Web)，能够通过浏览器访问的网站 CRM OA ERP 不谋全局者不足以谋一域前后端分离开发混合开发 ...

Java Web开发(2)

Java Web开发(2) Vue Vue是一套前端框架，免除原生的JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-View-Model）思想，实现数据的双向绑定，将编程的关注点放在数据上。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue</title>  <script src="../js/vue.js"></script> </head> <body> <div id="app">  <input type="text" v-model="message">  {{ message }} </div> </body> <script> // 创建一个Vue实例 new Vue({ // 将Vue实例挂载到id为"app"的元素上 el: "#app", // 定义数据对象 data: { message: "Hello Vue" // 初始值为"Hello Vue" } }) </script> </html> Vue常用指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue</title>  <script src="../js/vue.js"></script> </head> <body>  <div id="app"> <table border="1" cellspacing="0" width="60%"> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成绩</th> <th>等级</th> </tr>  <tr align="center" v-for="(user, index) in users"> <td>{{index + 1}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> <td>  <span v-if="user.gender == 1">男</span> <span v-if="user.gender == 2">女</span> </td> <td>{{user.score}}</td> <td>  <span v-if="user.score >= 60 && user.score < 85">优秀</span> <span v-else-if="user.score >= 85">及格</span> <span style="color:red" v-else>不及格</span> </td> </tr> </div> </body> <script> // 创建 Vue 实例 new Vue({ el: "#app", // 指定实例挂载的根节点 data: { // 用于存储数据的对象 users: [{ name: "Tom", age: 20, gender: 1, score: 30 }, { name: "Rose", age: 18, gender: 2, score: 99 }, { name: "Jerry", age: 16, gender: 1, score: 98 }, { name: "Kennem", age: 21, gender: 1, score: 100 }] }, }) </script> </html> Vue生命周期 new new Vue({ el: "#app", //接管区域 data: { }, methods: { }, mounted() { alert("挂载完成!"); }, }) Ajax Asynchronous JavaScript And XML, 异步的JavaScript和XML 作用：数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想，用户名是否可用的校验等。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生Ajax</title> </head> <body> <input type="button" value="获取数据" onclick="getData()"> <div id="div1"></div> </body> <script> function getData() { // 创建XMLHttpRequest对象 var xmlHttpRequest = new XMLHttpRequest(); // 发送异步请求 xmlHttpRequest.open('GET', 'https://xxx/json_demo.json'); xmlHttpRequest.send(); // 发送请求 // 获取服务响应数据 xmlHttpRequest.onreadystatechange = function () { if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) { document.getElementById('div1').innerHTML = xmlHttpRequest.responseText; } } } </script> </html> Axios Axios对原生的Ajax进行了封装，简化书写，快速开发。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ajax-Axios-案例</title>  <script src="js/axios-0.18.0.js"></script>  <script src="js/vue.js"></script> </head> <body> <div id="app">  <table border="1" cellspacing="0" width="60%">  <tr> <th>编号</th> <th>姓名</th> <th>图像</th> <th>性别</th> <th>职位</th> <th>入职日期</th> <th>最后操作时间</th> </tr>  <tr align="center" v-for="(emp,index) in emps"> <td>{{index + 1}}</td>  <td>{{emp.name}}</td>  <td> <img :src="emp.image" width="70px" height="50px">  </td> <td> <span v-if="emp.gender == 1">男</span>  <span v-if="emp.gender == 2">女</span> </td> <td>{{emp.job}}</td>  <td>{{emp.entrydate}}</td>  <td>{{emp.updatetime}}</td>  </tr> </table> </div> </body> <script> new Vue({ el: "#app", data: { emps: [] // 存储员工数据的数组 }, mounted () { // 在Vue实例mounted生命周期钩子中发送异步请求加载数据 axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => { // 异步请求成功后将数据赋值给emps数组 this.emps = result.data.data; }) } }); </script> </html> 接口管理平台 Yapi apifox ...