黑马头条(6)
黑马头条(6) Kafka概述 消息中间件 建议 Kafka 追求高吞吐量,适合产生大量数据的互联网服务的数据收集业务 RocketMQ 可可靠性要求很高的金融互联网领域,稳定性高,经历了多次阿里双11考验 RabbitMQ 性能较好,社区活跃度高,数据量没有那么大,优先选择功能比较完备的RabbitMQ Kafka是一个分布式流媒体平台,类似于消息队列或企业消息传递系统 ...
黑马头条(6) Kafka概述 消息中间件 建议 Kafka 追求高吞吐量,适合产生大量数据的互联网服务的数据收集业务 RocketMQ 可可靠性要求很高的金融互联网领域,稳定性高,经历了多次阿里双11考验 RabbitMQ 性能较好,社区活跃度高,数据量没有那么大,优先选择功能比较完备的RabbitMQ Kafka是一个分布式流媒体平台,类似于消息队列或企业消息传递系统 ...
黑马头条(5) 文章定时发布 延迟任务 DelayQueue JDK自带 DelayQueue 是一个支持延时获取元素的阻塞队列,内部采用优先队列 PriorityQueue 存储元素,同时元素必须实现Delayed接口;在创建元素时可以指定多久才可以从队列中获取当前元素,只有在延迟期满时才能从队列中提取元素。 ...
黑马头条(4) 自媒体文章审核 文章数据流 审核方式 自动审核 文章发布之后,系统自动审核,主要是通过第三方接口对文章的内容进行审核(成功、失败、不确定) 人工审核 待自动审核返回不确定信息时,转到人工审核,由平台管理员进行审核 ...
黑马头条(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) 表结构分析 ap_article 文章基本信息表 ap_article_config 文章配置表 ap_article_content 文章内容表 三张表关系分析 从业务角度分析如何分表 滚屏分页的逻辑 表的拆分-垂直分表 垂直分表:将一个表的字段分散到多个表中,每个表存储其中一部分字段。 ...
黑马头条(1) 微服务架构开发 Springboot Spring cloud Nacos Nacos 是一个由阿里巴巴开源的服务管理平台,专门用于微服务架构中的服务发现、配置管理和动态 DNS 服务。 环境搭建 目标:接口测试工具及前后端联调 类似今日头条 ...
Java Web开发(7) Spring原理 配置优先级 SpringBoot中支持三种格式配置文件的优先级 properties yaml yml 配置 SpringBoot除了支持配置文件属性配置,还支持Java系统属性和命令行参数的方式进行属性配置 ...
Java Web开发(6) 事务:事务是一组操作的集合,它是一个不可分割的工作单位,这些操作要么同时成功,要么同时失败 start transaction / begin commit rollback Spring事务管理 @Transactional 位置:业务(service)层的方法上、类上、接口上 作用:将当前方法交给spring进行事务管理,方法执行前,开启事务;成功执行完毕,提交事务;出现异常,回滚事务。 事务属性 ...
Java Web开发(5) MyBatis MyBatis是一款优秀的持久层框架,用于简化JDBC的开发。 使用Mybatis查询所有用户数据 创建SpringBoot工程, 数据库表user, 实体类User ...
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) 数据库 数据库:DataBase(DB) , 是存储和管理数据的仓库 DBMS, SQL MySql登录,首先在服务中启动mysql mysql -uroot -p"password" 或者 mysql -uroot -p 之后输入密码 ...
Java Web开发(1) 什么是Web? Web:全球广域网,也成为万维网(World Wide Web),能够通过浏览器访问的网站 CRM OA ERP 不谋全局者不足以谋一域 前后端分离开发 混合开发 ...
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> <!-- 引入Vue.js库 --> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <!-- 输入框,使用v-model指令实现双向数据绑定 --> <input type="text" v-model="message"> <!-- 使用插值表达式显示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> <!-- 引入 Vue.js 文件 --> <script src="../js/vue.js"></script> </head> <body> <!-- Vue 实例挂载的根节点 --> <div id="app"> <table border="1" cellspacing="0" width="60%"> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成绩</th> <th>等级</th> </tr> <!-- 使用 v-for 循环渲染列表 --> <tr align="center" v-for="(user, index) in users"> <td>{{index + 1}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> <td> <!-- 使用 v-if 条件渲染 --> <span v-if="user.gender == 1">男</span> <span v-if="user.gender == 2">女</span> </td> <td>{{user.score}}</td> <td> <!-- 使用 v-if、v-else-if、v-else 实现多条件渲染 --> <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> <!-- 引入axios库 --> <script src="js/axios-0.18.0.js"></script> <!-- 引入Vue.js --> <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> <!-- 数据行,使用Vue.js的v-for指令循环渲染 --> <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 ...
Java20天速成——进阶课程(5) 网络编程 可以让设备中的程序与网络上其他设备中的程序进行数据交互(实现网络通信) 基本的通信架构 基本的通信架构有2中形式:CS架构(Client客户端/Server服务端)、BS架构(Browser浏览器/Server服务器) 无论是CS架构,还是BS架构的软件都必须要依赖网络编程 ...
Java20天速成——进阶课程(4) 特殊文件 properties, xml 为什么要用这些特殊文件? 存储多个用户的:用户名, 密码, 家乡, 性别 日志技术 把程序运行的信息,记录到文件中,方便程序员定位bug, 并了解程序的执行情况等。 ...