做社交网站要注册哪类商标/百度提交网站的入口地址
📢 大家好,我是 【战神刘玉栋】,有10多年的研发经验,致力于前后端技术栈的知识沉淀和传播。 💗
🌻 CSDN入驻不久,希望大家多多支持,后续会继续提升文章质量,绝不滥竽充数,欢迎多多交流。👍
文章目录
- 写在前面的话
- 教师信息管理 CURD
- 前文回顾
- 日期格式化
- 前端代码生成
- 代码修修补补
- 前端知识拓展
- 图形化方式创建 Vue
- 整合路由 Vue-Router
- 总结陈词
写在前面的话
本系列博文已连载到第三回,通过前三回博文,我们已完成了前后端基础服务的搭建,也完成后端的完整接口清单,前端还差一些,本篇博文,把前端功能补充完整,让它像那么回事。
本篇博文,还有几个目标要完成:
- 回顾一下之前三篇文章,将一些知识点补充一下;
- 针对需求内容,把前端服务的CURD功能丰富起来;
- 对部分前端细节不到位的地方进行修复,同时分享相关经验;
加油,程序猿,保持住Tempo,开干,玩的就是真实!
关联文章:
《程序猿入职必会(1) · 搭建拥有数据交互的 SpringBoot 》
《程序猿入职必会(2) · 搭建具备前端展示效果的 Vue》
《程序猿入职必会(3) · SpringBoot 各层功能完善 》
《程序猿入职必会(4) · Vue 完成 CURD 案例 》
《程序猿入职必会(5) · CURD 页面细节规范 》
《程序猿入职必会(6) · 返回结果统一封装》
教师信息管理 CURD
Tips:一直说CURD、CURD的,行业内的默认术语,如果有小伙伴不知道这是什么,那大概是代表创建(Create)、更新(Update)、读取(Read)和删除(Delete)操作的集合,可以指代某个实体表对应的维护页面,也是程序猿最基础的拧螺丝工作。
前文回顾
先回顾一下之前第二篇的结尾,我们引入 ElementUI 后,实现的效果如下。
效果还可以,不过只是功能的冰山一角。
不对,登记时间怎么是这个鬼样子?先给它修正,不然很别扭。
日期格式化
实现日期格式化可以后端来,也可以前端。
后端实现效果
Step1、引入 fastjson 依赖
<fastjson.version>2.0.33</fastjson.version><!-- JSON处理 -->
<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>${fastjson.version}</version>
</dependency>
Step2、实体类添加注释
@JSONField(format = "yyyy-MM-dd HH:mm")
private java.util.Date createdTime;
Step3、前端正常展示
<span>{{ scope.row.createdTime}}</span>
效果如下:
前端实现效果
使用vue的管道符实现,代码如下:
<span>{{ scope.row.createdTime | timeFilter}}</span>timeFilter(time) {// 这边将字符串进行日期转换
}
前端代码生成
这里先使用代码生成器生成教师实体对应的前端基础页面和接口,不然一个个写是挺耗时的,也比较基础。
企业实际开发中,这部分代码通常也是代码生成或者CV其他代码,再进行调整。
先来一段完整的Vue:
<template><div class="app-container"><!-- 表头 查询与新增 --><el-row><el-col :span="24"><div class="filter-container"><el-input placeholder="关键词过滤" v-model="listQuery.query" style="width: 200px;" class="filter-item"@keyup.enter.native="handleFilter"/><el-select v-model="listQuery.validFlag" placeholder="有效标志" clearable class="filter-item" style="width: 150px"@change="handleFilter"><el-option v-for="(value, key) in statusOptions" :key="key" :label="value" :value="key"/></el-select><el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button><el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-circle-plus-outline"@click="handleCreate">新增</el-button></div></el-col></el-row><!-- 表格list --><el-row><el-col :span="24" :gutter="24"><el-table:row-class-name="rowClassName"v-loading="listLoading":key="tableKey":data="list"element-loading-text="Loading"borderfit:height="tableHeight"style="width: 100%;"highlight-current-row><el-table-column align="center" label="序号" width="80"><template slot-scope="scope">{{ scope.$index }}</template></el-table-column><el-table-column show-overflow-tooltip label="教师编号" show-overflow-tooltip min-width="10%" align="center"><template slot-scope="scope">{{ scope.row.teaCode }}</template></el-table-column><el-table-column show-overflow-tooltip label="教师名称" show-overflow-tooltip min-width="10%" align="center"><template slot-scope="scope">{{ scope.row.teaName }}</template></el-table-column><el-table-column show-overflow-tooltip label="教师头像" show-overflow-tooltip min-width="10%" align="center"><template slot-scope="scope">{{ scope.row.teaImg }}</template></el-table-column><el-table-column show-overflow-tooltip label="教师电话" show-overflow-tooltip min-width="10%" align="center"><template slot-scope="scope">{{ scope.row.teaPhone }}</template></el-table-column><el-table-column show-overflow-tooltip label="教师学科" show-overflow-tooltip min-width="10%" align="center"><template slot-scope="scope">{{ scope.row.stuItem }}</template></el-table-column><el-table-column show-overflow-tooltip label="教师身份" show-overflow-tooltip min-width="10%" align="center"><template slot-scope="scope">{{ scope.row.teaType }}</template></el-table-column><el-table-column show-overflow-tooltip label="教师配置" show-overflow-tooltip min-width="10%" align="center"><template slot-scope="scope">{{ scope.row.teaConfig }}</template></el-table-column><el-table-column show-overflow-tooltip label="排序号" show-overflow-tooltip min-width="10%" align="center"><template slot-scope="scope">{{ scope.row.sortNo }}</template></el-table-column><el-table-column show-overflow-tooltip class-name="status-col" label="创建时间" min-width="20%" align="center"><template slot-scope="scope"><i class="el-icon-time"/><span>{{ scope.row.createdTime }}</span></template></el-table-column><el-table-column show-overflow-tooltip class-name="status-col" label="修改时间" min-width="20%" align="center"><template slot-scope="scope"><i class="el-icon-time"/><span>{{ scope.row.modifiedTime }}</span></template></el-table-column><el-table-column show-overflow-tooltip class-name="status-col" label="有效标志" min-width="10%" align="center"><template slot-scope="scope"><el-tag :type="scope.row.validFlag | statusFilter">{{ scope.row.validFlag | validFilter }}</el-tag></template></el-table-column><el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width"><template slot-scope="scope"><el-button size="mini" type="primary" @click="handleUpdate(scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table></el-col></el-row><!-- 分页控件 --><pagination v-show="total>0" :total="total":page.sync="listQuery.pageNum":limit.sync="listQuery.pageSize"layout="total, sizes, prev, pager, next"style="float:right;"@pagination="fetchData"/><!-- 编辑弹窗 --><el-dialog:close-on-click-modal="false":title="textMap[dialogStatus]":visible.sync="dialogFormVisible"><el-formref="dataForm":rules="rules":model="temp"label-position="right"label-width="100px"style=""><el-row :gutter="20"><el-col :span="12"><el-form-item label="教师编号" label-width="105px" prop="teaCode"><el-input v-model="temp.teaCode" :disabled="dialogStatus === 'update'"/></el-form-item></el-col></el-row><el-row :gutter="20"><el-col :span="12"><el-form-item label="教师名称" label-width="105px" prop="teaName"><el-input v-model="temp.teaName"/></el-form-item></el-col><el-col :span="12"><el-form-item label="教师头像" label-width="105px" prop="teaImg"><el-input v-model="temp.teaImg"/></el-form-item></el-col></el-row><el-row :gutter="20"><el-col :span="12"><el-form-item label="教师电话" label-width="105px" prop="teaPhone"><el-input v-model="temp.teaPhone"/></el-form-item></el-col><el-col :span="12"><el-form-item label="教师学科" label-width="105px" prop="stuItem"><el-input v-model="temp.stuItem"/></el-form-item></el-col></el-row><el-row :gutter="20"><el-col :span="12"><el-form-item label="教师身份" label-width="105px" prop="teaType"><el-input v-model="temp.teaType"/></el-form-item></el-col><el-col :span="12"><el-form-item label="教师配置" label-width="105px" prop="teaConfig"><el-input v-model="temp.teaConfig"/></el-form-item></el-col></el-row><el-row :gutter="20"><el-col :span="12"><el-form-item label="排序号" label-width="105px" prop="sortNo"><el-input v-model.number="temp.sortNo"/></el-form-item></el-col><el-col :span="12"></el-col></el-row><el-row :gutter="20"><el-col :span="12"></el-col><el-col :span="12"><el-form-item label="有效标志" label-width="105px"><el-switchv-model="validSwitch"active-color="#13ce66"inactive-color="#ff4949"></el-switch></el-form-item></el-col></el-row></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确认</el-button><el-button @click="dialogFormVisible = false">取消</el-button></div></el-dialog></div>
</template><script>
import ZyTeacherInfoApi from '@/api/study/ZyTeacherInfoApi'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {directives: { waves },components: { Pagination },filters: {statusFilter(status) {const statusMap = {1: 'success',2: 'blue',3: 'warning',4: 'info',0: 'danger'}return statusMap[status]},commonFilter(status, data) {if (status) {return data[status].text || data[status]} else {return ''}},validFilter(status) {const statusMap = {1: '有效',0: '作废'}return statusMap[status]},timeFilter(time) {if (time) {return new Date(time).Format('yyyy-MM-dd hh:mm:ss')} else {return ''}}},data() {return {tableKey: 0,//表格key值list: null, //表格对象listLoading: true, //表格加载框total: 0, //分页总数tableHeight: window.innerHeight - 220, //表格高度listQuery: { //表格查询对象pageNum: 1,pageSize: 10,query: '',validFlag: undefined,teaCode: ''},temp: {}, //编辑框临时变量statusOptions: { //有效无效下拉框'1': '有效','0': '作废'},dialogFormVisible: false, //编辑框显示dialogStatus: '', //编辑框更新插入状态textMap: { //编辑框标题update: '编辑',create: '创建'},rules: { //编辑框校验规则teaCode: [{ required: true, message: '请输入教师编号', trigger: 'change' }],teaName: [{ required: true, message: '请输入教师名称', trigger: 'change' }],teaImg: [{ required: true, message: '请输入教师头像', trigger: 'change' }],teaPhone: [{ required: true, message: '请输入教师电话', trigger: 'change' }],stuItem: [{ required: true, message: '请输入教师学科', trigger: 'change' }],teaType: [{ required: true, message: '请输入教师身份', trigger: 'change' }],teaConfig: [{ required: true, message: '请输入教师配置', trigger: 'change' }],sortNo: [{type: 'number', required: false, message: '排序号必须为整数值', transform(value) {if (value === '' || value === null) {return 0}if (_.isInteger(value)) {return value} else {return false}}}],validFlag: [{ required: true, message: '请输入有效标志', trigger: 'change' }]}}},computed: {validSwitch: {// getterget: function() {return this.temp.validFlag === '1'},// setterset: function(newValue) {if (newValue) {this.temp.validFlag = '1'} else {this.temp.validFlag = '0'}}}},created() {this.fetchData()},methods: {/*** 获取表格数据*/fetchData() {let that = thisthis.listLoading = truethis.$http.all([ZyTeacherInfoApi.getPage(this.listQuery)]).then(this.$http.spread(function(perms) {that.list = perms.rowsthat.total = perms.totalthat.listLoading = false}))},/*** 新增弹窗*/handleCreate() {this.resetTemp()this.dialogStatus = 'create'this.dialogFormVisible = truethis.$nextTick(() => {this.$refs['dataForm'].clearValidate()})},/*** 清空弹窗内容*/resetTemp() {this.temp = {teaCode: '',teaName: '',teaImg: '',teaPhone: '',stuItem: '',teaType: '',teaConfig: '',sortNo: '',createdTime: '',modifiedTime: '',validFlag: '1'}},/*** 确定新增*/createData() {let that = thisthis.$refs['dataForm'].validate((valid) => {if (valid) {ZyTeacherInfoApi.insert(this.temp).then(() => {this.dialogFormVisible = falsethis.$notify({title: '成功',message: '创建成功',type: 'success',duration: 1000,onClose() {that.fetchData()}})})}})},/*** 编辑弹窗*/handleUpdate(row) {this.temp = Object.assign({}, row)this.dialogStatus = 'update'this.dialogFormVisible = truethis.$nextTick(() => {this.$refs['dataForm'].clearValidate()})},/*** 确认编辑*/updateData() {let that = thisthis.$refs['dataForm'].validate((valid) => {if (valid) {const tempData = Object.assign({}, this.temp)ZyTeacherInfoApi.update(tempData).then(() => {this.dialogFormVisible = falsethis.$notify({title: '成功',message: '更新成功',type: 'success',duration: 1000,onClose() {that.fetchData()}})})}})},/*** 删除操作*/handleDelete(row) {let that = thisZyTeacherInfoApi.remove({ teaCode: row.teaCode }).then(() => {this.$notify({title: '成功',message: '删除成功',type: 'success',duration: 1000,onClose() {that.fetchData()}})})},/*** 搜索过滤*/handleFilter() {this.listQuery.pageNum = 1this.fetchData()},rowClassName({ rowIndex }) {return rowIndex % 2 === 0 ? 'warning-row' : 'success-row'}}
}
</script><style>
.el-table .warning-row {background-color: #fff7e6;
}.el-table .success-row {background-color: #f0f9eb;
}
</style>
再来一段完整的api:
import request from '@/utils/request'export default {getList(params) {return request({url: '/zyTeacherInfo/', method: 'get', params})},get(params) {return request({url: '/zyTeacherInfo/' + params.teaCode, method: 'get', params})},getPage(params) {return request({url: '/zyTeacherInfo/page', method: 'get', params})},update(params) {return request({url: '/zyTeacherInfo/update', method: 'post', params})},insert(params) {return request({url: '/zyTeacherInfo/insert', method: 'post', params})},remove(params) {return request({url: '/zyTeacherInfo/delete', method: 'post', params})}
}
接着配一下路由,router.js
Tips:路由前面可能还没介绍,后续专题介绍。
{path: '/tea', component: () => import('@/views/study/ZyTeacherInfoManage'), hidden: true
},
最后,看一下效果,有那么回事吧。
操作一下增删改查,基本功能都正常,你敢相信,使用一套合适的代码生成器,仅仅几分钟就可以实现一个CURD功能。
代码修修补补
虽然功能全部正常,但是要拿去交差还是要完善一些。
【查询页面调整】
首先,表格页面代码生成的是全部字段,先把不重要的字段去掉,效果如下:
表单元素太紧凑了,加一点间距,上一篇文章刚介绍了《企业实战分享 · CodeGeeX 初体验》,给它一个机会,练练手,如下所示:
生成很快,试试,效果如下图:
啧啧,什么鬼,没理解我意图,直接用 span 拆开间距了,也可能我没说清楚。
那给ChatGpt一个机会:
效果如下图,好像还不错,就这样吧。
【分页查询功能】
代码生成器是没办法那么智能知道你想用哪些字段作为搜索条件,当然生成的时候,给字段添加一些额外标识就另说,但感觉这样效率更低,还不如生成之后再来调整。
这边设计代码生成器的时候,固定保留了一个模糊搜索框和有效标志下拉框,可以覆盖大部分场景的最小需要。
看一下对应前端代码:
1、前端定义listQuery对象代表查询入参,传递query和validFlag两个属性,点击搜索触发handleFilter逻辑。
2、触发的JS逻辑,其实就是利用基于axios封装的请求工具,异步请求相关接口获取分页数据。
Tips:关于前端请求后端的工具封装,后续专栏介绍。
<el-input placeholder="关键词过滤" v-model="listQuery.query" class="filter-item input-item"@keyup.enter.native="handleFilter"
/>
<el-select v-model="listQuery.validFlag" placeholder="有效标志" clearable class="filter-item select-item"@change="handleFilter"><el-option v-for="(value, key) in statusOptions" :key="key" :label="value" :value="key"/>
</el-select>
<el-button v-waves class="filter-item button-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索
</el-button>
/*** 搜索过滤*/
handleFilter() {this.listQuery.pageNum = 1this.fetchData()
},/*** 获取表格数据*/
fetchData() {let that = thisthis.listLoading = truethis.$http.all([ZyTeacherInfoApi.getPage(this.listQuery)]).then(this.$http.spread(function(perms) {that.list = perms.rowsthat.total = perms.totalthat.listLoading = false}))
},
再看看后端代码:
1、这边是借助PageHelper
插件,轻松实现分页效果;
2、第二段是XML里面的SQL写法,参考一下即可,根据query模糊搜索,根据validFlag是精确查询;
@Service
public class ZyTeacherInfoService extends CrudService<ZyTeacherInfo, ZyTeacherInfoMapper> {/*** 获取用户分页列表** @param query 搜索关键词* @param pageInfo 分页实体* @param zyTeacherInfo 实体入参* @return 用户列表*/public PageInfo<ZyTeacherInfo> findListPage(String query, PageInfo pageInfo, ZyTeacherInfo zyTeacherInfo) {PageHelper.startPage(pageInfo);List<ZyTeacherInfo> zyTeacherInfolist = this.dao.findListPage(query, zyTeacherInfo);return new PageInfo<>(zyTeacherInfolist);}
}@Mapper
public interface ZyTeacherInfoMapper extends BaseMapper<ZyTeacherInfo> {/*** 分页获取教师信息表列表** @param query 搜索关键词* @param zyTeacherInfo 查询实体* @return 用户列表*/List<ZyTeacherInfo> findListPage(@Param("query") String query, @Param("model") ZyTeacherInfo zyTeacherInfo);
}
<!-- 分页查询教师信息表列表 -->
<select id="findListPage" resultType="zyTeacherInfo">selectt.*fromzy_teacher_info twhere 1=1<if test="query != null and query != ''">AND (INSTR(t.TEA_NAME , #{query})>0 OR t.TEA_CODE = #{query})</if><if test="model.validFlag != null and model.validFlag != ''">and t.VALID_FLAG = #{model.validFlag}</if>
</select>
【关于增删改】
这部分属于基操,前面示例都能看懂,这边以更新为例简单说明。
前端:
1、填写完表单信息,触发updateData函数,先针对表单信息做一个校验(参考ElementUI);
2、触发 ZyTeacherInfoApi 接口,该接口也是利用 Axios,触发 Post 请求,调用后端;
updateData() {let that = thisthis.$refs['dataForm'].validate((valid) => {if (valid) {const tempData = Object.assign({}, this.temp)ZyTeacherInfoApi.update(tempData).then(() => {this.dialogFormVisible = falsethis.$notify({title: '成功',message: '更新成功',type: 'success',duration: 1000,onClose() {that.fetchData()}})})}})
},update(params) {return request({url: '/zyTeacherInfo/update', method: 'post', params})
},
后端:好像没什么特别的,就是正常的 MyBatis - Update,搞定!
前端知识拓展
图形化方式创建 Vue
在这篇博文《程序猿学会 Vue · 基础与实战篇》中,介绍创建Vue项目的多种方式,漏介绍了一种图形化。
命令行输入:vue ui
会自动打开一个图形化页面,如下图,按步骤傻瓜式操作即可。
Tips:好像也没有什么特别的,不详细介绍。
Tips:SpringBoot也有类似界面,总之就是越来越简单了,怎么傻瓜怎么来。
整合路由 Vue-Router
【安装使用】
Step1、安装路由
npm install vue-router
Step2、编写路由配置文件,/router/index.js
import {createRouter, createWebHashHistory} from 'vue-router'
import HomeView from '../views/Home.vue'const routes = [{path: '/home', name: 'home', component: HomeView
}, {path: '/about', name: 'about', component: () => import('../views/About.vue')
}]const router = createRouter({history: createWebHashHistory(), routes
})export default router
Step3、引入上述 JS,在 main.js 操作
// 引入路由
import router from './router/index.js'
app.use(router)
Step4、效果使用
App.vue 页面在合适地方添加:
地址栏输入/home或/about,内容会随之变化。
总结陈词
本系列博文更新到第四篇了,基本实现了教师的CURD功能。
接下来几篇博文将针对其中涉及的几个框架封装知识点进行专题说明。
总之,目标是帮助初入职场的大家,快速适应企业开发,多一些机会。
💗 如果觉得内容还可以,麻烦点个关注不迷路,您的鼓励是我创作的动力。
相关文章:

《程序猿入职必会(4) · Vue 完成 CURD 案例 》
📢 大家好,我是 【战神刘玉栋】,有10多年的研发经验,致力于前后端技术栈的知识沉淀和传播。 💗 🌻 CSDN入驻不久,希望大家多多支持,后续会继续提升文章质量,绝不滥竽充数…...

编程技巧:如何优雅地合并两个有序数组?
目录 题目引用描述1.直接合并 排序2.指针3.后逆向双指针进阶:你可以设计实现一个时间复杂度为 O(m n) 的算法解决此问题吗?总结 题目 来自力扣 引用 合并两个有序数组 给你两个按 **非递减顺序 **排列的整数数组 nums1 和 nums2,另有两个整…...

Vue组件库移动端预览实现原理
引言 大家如果使用过移动端组件库(比如:Vant),会发现在网站右侧有一个手机端的预览效果。 而且这个手机端预览的内容和外面的组件代码演示是同步的,切换组件的时候,移动端预览的内容也会发生相应的变化。 …...

FastAPI(七十五)实战开发《在线课程学习系统》接口开发-- 创建课程
源码见:"fastapi_study_road-learning_system_online_courses: fastapi框架实战之--在线课程学习系统" 上次我们分享了,FastAPI(七十四)实战开发《在线课程学习系统》接口开发-- 删除留言 从本篇文章开始,…...

【C++】 条件变量实现线程同步示例
在做一些比较大的项目的时候,需要实现线程同步, 这里结合一个小示例,进行线程同步的讲解 问题定义 以下是一个使用 C 多线程和条件变量的示例,展示了线程 A 接收一个 enable 信号并通知线程 B 开始工作。线程 B 在开始工作之前…...

linux下载redis安装并指定配置文件启动
linux下载redis并安装启动: cd /usr/local/src 下载redis压缩包 wget http://download.redis.io/releases/redis-6.2.6.tar.gz 解压 tar -xzf redis-6.2.6.tar.gz 编译和安装redis make make install 安装完成后进入 redis 安装目录 cd /usr/local/bin 修改…...

线性结构、线性表、顺序表、链表、头插法、尾插法、中间插入或删除一个节点
梳理几个名词: 逻辑地址:就是说是第几个元素。 物理地址:也就是存储地址,在计算机里具体存放的位置。 线性表的存储结构分为: (1)顺序存储结构:将数据依次存储在连续的整块物理空…...

C# Task.WaitAll 的用法
目录 简介 1.WaitAll(Task[], Int32, CancellationToken) 2.WaitAll(Task[]) 3.WaitAll(Task[], Int32) 4.WaitAll(Task[], CancellationToken) 5.WaitAll(Task[], TimeSpan) 结束 简介 Task.WaitAll 是 C# 中用于并行编程的一个的方法,它属于 System.Threa…...

vue2 前端实现pdf在线预览(无插件版)
toFielDetail()是点击预览的方法,getOfficialFile是获取文件流的接口正常定义即可: export function getOfficialFile(query) {return request({url: /dataAsset/projectassess/getOfficialFile,method: get,params: query,}); } 调用接口的页面需要引用…...

排序XXXXXXXXX
信息学奥赛|常见排序算法总结(C+) - 腾讯云开发者社区-腾讯云 (tencent.com) https://cloud.tencent.com/developer/news/975232 常用序号层级排序 一、序号 序号Sequence Number,有顺序的号码,如数字序号…...

【文件解析漏洞】实战详解!
漏洞描述: 文件解析漏洞是由于中间件错误的将任意格式的文件解析成网页可执行文件,配合文件上传漏洞进行GetShell的漏洞! IIS解析漏洞: IIS6.X: 方式一:目录解析 在网站下建立文件夹的名字为.asp/.asa 的文件夹,其目…...

【杂谈】学会让你节省三秒钟——Dev-c++的缺省源
【杂谈】学会让你节省三秒钟——Dev-c的缺省源 1.前言2.缺省源的介绍3.注意 1.前言 你是否在为每次写程序都要自己手打一遍框架而感到苦恼?为什么大佬的Dev-C一新建文件就会自动出现程序框架?看完这篇文章,让你也能成为大佬,不用再…...

推荐一款前端滑动验证码插件(Vue、uniapp)
uniapp版本:滑块拼图验证码,有后端,简单几步即可实现,小程序、h5都可以用 - DCloud 插件市场 Vue版本及cdn版本可以查阅文档: 行为验证 | Poster 文档 示例代码: <template><view id"app&…...

【Git】git stash
目录 基本概念参数详解listshowsavepushpop|applydropclearbranch 参考文章 Git的stash命令是一个非常实用的功能,它允许开发者临时保存工作目录和暂存区的更改,以便能够切换到其他分支或进行其他操作,而不会丢失当前的修改。以下是git stash…...

不得不安利的程序员开发神器,太赞了!!
作为一名程序员,你是否常常为繁琐的后端服务而感到头疼?是否希望有一种工具可以帮你简化开发流程,让你专注于创意和功能开发?今天,我要向大家隆重推荐一款绝佳的开发神器——MemFire Cloud。它专为懒人开发者准备&…...

吴恩达机器学习C1W2Lab06-使用Scikit-Learn进行线性回归
前言 有一个开源的、商业上可用的机器学习工具包,叫做scikit-learn。这个工具包包含了你将在本课程中使用的许多算法的实现。 目标 在本实验室你可以: 利用scikit-learn实现基于正态方程的近似解线性回归 工具 您将使用scikit-learn中的函数以及ma…...

CSS实现表格无限轮播
<div className{styles.tableTh}><div className{styles.thItem} style{{ width: 40% }}>报警名称</div><div className{styles.thItem} style{{ width: 35% }}>开始时间</div><div className{styles.thItem} style{{ width: 25% }}>状态&…...

编程小白如何从迷茫走出
针对新生们常常感到的迷茫,以下是如何选择适合自己的编程语言、如何制定有效的学习计划以及如何避免常见的学习陷阱的详细建议: 一、如何选择适合自己的编程语言 明确需求和目标:不同的编程语言有不同的特点和适用场景。例如,Py…...

14 B端产品的运营管理
通过运营找到需求并通过交换价值提供供给,再逐步扩大规模、站稳脚跟,辅助产品在商业竞争中获胜。 B端产品运营框架 1. 打通渠道 目的:触达客户。 环节:文案策划、活动策划→广告渠道推广→线下BD。 线下BD:通过见面…...

STM32_RTOS学习笔记——1(列表与列表项)
总体RTOS笔记目录 一,列表与列表项(本文) 二,待定 视频参考:B站野火 一,C语言列表概念 列表就是C语言中的链表,链表就如同下面的衣架一样,需要的各种内容可以参考 C语言链表可…...

子网划分案例
划分子网是将一个较大的网络划分为多个较小的子网,以提高网络管理和安全性 子网划分可以更有效地利用 IP 地址空间,并且有助于控制网络流量、提高网络性能和安全性。 子网划分的主要步骤如下: 确定需要划分的子网数量以及每个子网所需的主…...

javaweb_02:Maven
一、引入 在javaweb的开发中,需要使用大量的jar包,我们得手动去导入,而Maven可以自动帮我们导入和配置这个jar包。 二、Maven项目框架管理工具 核心思想:约定大于配置(有约束不违反):Maven会…...

19.延迟队列优化
问题 前面所讲的延迟队列有一个不足之处,比如现在有一个需求需要延迟半个小时的消息,那么就只有添加一个新的队列。那就意味着,每新增一个不同时间需求,就会新创建一个队列。 解决方案 应该讲消息的时间不要跟队列绑定…...

P10477 Subway tree systems 题解,c++ 树相关题目
题目 poj 链接 洛谷链接 n n n 组数据,每组数据给定两个 01 01 01 串(长度不超过 3000 3000 3000),意思如下: 对于每一个 0 0 0,代表该节点有一个子节点,并前往该子节点。对于每一个 1 1 …...

18.jdk源码阅读之CopyOnWriteArrayList
1. 写在前面 CopyOnWriteArrayList 是 Java 中的一种线程安全的 List 实现,基于“写时复制”(Copy-On-Write)机制。下面几个问题大家可以先思考下,在阅读源码的过程中都会解答: CopyOnWriteArrayList 适用于哪些场景…...

美股:AMD展现乐观前景,挑战AI加速器市场霸主
在科技行业的激烈竞争中,AMD公司近期发布了对当前季度收入的乐观预测,显示出其新推出 一、AMD第三季度营收预期超越分析师平均预期 AMD在周二的声明中预计,第三季度营收将达到约67亿美元,这一数字超出了分析师此前平均预期的66.…...

如何提高计算机视觉技术在复杂环境和低光照条件下的物体识别准确率?
要在复杂环境和低光照条件下提高计算机视觉技术的物体识别准确率,可以采取以下几个方法: 数据增强:在训练集中添加各种复杂环境和低光照条件下的图片,通过增加数据的多样性,使算法能够更好地适应各种场景。 预处理&am…...

ubuntu cmake使用自己版本的qt
给一篇文章参考 https://blog.csdn.net/bank_dreamer/article/details/138678909 自己使用的范例 set(Qt5_DIR "/home/peak/Qt5.14.0/5.14.0/gcc_64/lib/cmake/Qt5")# 设置Qt5的安装目录 #set(CMAKE_PREFIX_PATH "/home/peak/Qt5.14.0")find_package(Qt5…...

Python基础知识笔记---保留字
保留字,也称关键字,是指被编程语言内部定义并保留使用的标识符。 一、保留字概览 二、保留字用途 1. False:表示布尔值假。 2. None:表示空值或无值。 3. True:表示布尔值真。 4. not:布尔逻辑操作符…...

Python面试整理-Web开发
在Python中,Web开发可以利用多种强大的框架和库来构建从简单的静态网页到复杂的动态Web应用。以下是几种流行的Python Web开发框架和相关技术的概述: 1. Flask Flask 是一个轻量级的Web应用框架,它非常灵活,适用于小型到中型项目,或作为构建微服务的基础。Flask的核心非常…...