- 博客(42)
- 收藏
- 关注
原创 react学习之dva
快速上手全局安装npm install dva-cli -g构建dva项目dva new dva-demo运行npm start引入antd安装npm install antd babel-plugin-import --save引入样式入口文件引入样式文件import antd/dist/antd.css路由路由组件在routes文件夹,路由导航在route.js文件中。在routes中定义about.js文件。在router.js中引入,地址栏输入about路由即可
2021-05-11 17:03:07 742 3
原创 react学习之react-hooks
简单使用useStateuseState 是最简单的一个 hook唯一需要注意的是不要尝试在循环或者条件等不稳定的代码结构中编写import React,{ useState } from 'react'export default function Example() { const [name, setName] = useState('swj') return ( <div> {name} <button onClick={()=
2021-05-11 15:35:00 227
原创 react之redux的学习
为什么需要redux管理的状态越来越多,越来越复杂。状态包括服务器返回、缓存的数据、用户操作产生的数据、UI的展示状态等。管理不断变化的state是非常困难的。一个状态的变化引起另一个状态的变化,UI也会引起状态的变化。react帮助我们管理视图,state需要我们自己管理。帮助我们管理state的容器。核心理念storeactionreducer三大原则单一数据源整个项目的state存在一个object tree中,并且这个object tree之存储在store中
2021-05-10 18:53:51 216
原创 一个落魄大学生的毕业设计【校园微信小程序】
项目准备微信小程序公众号平台账号centos服务器(我买的腾讯云)备案过的域名且配有证书,小程序只支持https开发时常3月9日到3月25号左右的样子,从npm初始化到项目落地。从UI原型图到前端实现到后台功能实现并对接。个人独立开发完成。使用技术栈前端:微信小程序(原生开发)、vant的UI库等后端:NodeJs、Express、MongoDB、Redis等代码地址前端地址:https://github.com/shenweijian-coding/graduation-pro
2021-04-09 17:28:06 11735 4
原创 前端值得学习的设计网站,提高审美必备。
前言之前有幸学过两年UI设计,今天推荐几个可以让程序员提高审美的网站,平时有空可以多逛逛。你可以学到交互的流程、用户分析、用户黏度、提高用户体验及自身的审美感。推荐网站站酷网官网链接:https://www.zcool.com.cn/推荐指数:⭐⭐⭐⭐⭐这个网站齐聚了国内大部分的设计师,平面、3D、室内设计、雕塑、UI等等,你可以在里面看到很多熟悉的作品以及它们背后的设计者。花瓣网官网链接:https://huaban.com/推荐指数:⭐⭐⭐⭐⭐花瓣网上有很多素材截图(模仿国外的
2021-03-10 08:43:31 793
原创 vue-element实战电商管理后台项目
前言这个项目适合刚上手Vue的同学或者入门的小白拿来练习。这个项目很简单,没有太大的难点。如果你已熟练vue,练习这个单纯浪费时间。你可能学到的知识vue框架整体的认知及熟练程度。element-UI的使用与后台交互的流程ES6的部分语法知识上线打包压缩的流程项目预览项目地址B站链接:https://www.bilibili.com/video/BV1EE411B7SU?from=search&seid=12966821188838615288...
2021-03-10 08:21:14 238 1
原创 对花裤衩大叔vue-element-admin后台项目的学习
前言预览地址:https://panjiachen.gitee.io/vue-element-admin/#/dashboardGitHub地址:https://github.com/PanJiaChen/vue-element-admin文档地址:https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/技术点看vue-element-admin代码,学到的技术点。路由权限生成,src目录下的permission.js文件,详细.
2021-03-06 12:29:44 6371 1
转载 Echarts真实项目开发
可视化面板介绍 应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。01-使用技术完成该项目需要具备以下知识:div + css 布局flex 布局Less原生js + jquery 使用rem适配echarts基础02- 案例适配方案设计稿是1920pxflexible.js 把屏幕分为 24 等份cssrem 插件的基准值是 80px插件-配置按钮—配置扩展
2021-03-02 08:56:51 538
原创 React学习记录之前端跨域配置代理
场景前端代码import React,{ Component } from 'react'import axios from 'axios'class Hello extends Component{ getStudnetInfo() { axios({ url: 'http://127.0.0.1:3001/student' }).then(res=>{ console.log(res); }) } render(h) {
2021-02-27 10:26:09 330
原创 vscode 调试接口插件 REST Client插件使用
前言平常大家在日常开发中,少不了接口的调试工作。大家用到最多就是Postman了,不过我最近发现了一个比较轻便的vs code插件,编写代码时,就可以直接调试,查看结果,太方便了~REST client插件直接在vscode商店搜索即可。使用在当前文件夹下新建一个 以 .http 或者 以 .rest结尾的文件,并打开该文件输入内容;按照 HTTP Raw 的格式编写请求内容在编写请求内容完成后,会在请求方式上方浮现一个 Send Request按钮,点击该按钮即可完成请求的调用在执
2021-02-26 11:09:58 1898 1
原创 vue-cli3项目打包并压缩代码体积
前言最近要上线自己的个人项目,那得要服务器吧,拿着我这“碎银几两”,犹豫不决的买了两年,1核4g的服务器。不上线不知道,一上线的结果就是:把静态资源加载出来足足花了10秒钟,对于我这钟没耐性的人来说,都不想等,更别说用户使用者了。压缩项目大小组件路由懒加载换成这种写法,当使用的时候,再去引入这个组件的资源。const Home = () => import('../views/Home.vue')const routes = [ { path: '/index',
2021-02-26 10:25:51 2766
转载 设计师必备,素材网站如千图包图免费下载的方法
该网站目前免费送 视达网观看权限支持课堂源文件下载,赠送部分免费素材网站下载。前言如果您看到了这篇文章,说明您同我一样需要下载素材,做的工作多多少少跟设计沾点边。对于学生来说,各个网站的素材会员确实比较贵,或者只是临时下载某个素材,确实没必要去购买官方会员,由此您可能会去购买第三方的解析网站等等代下服务。之前,我跟大家一样,也是一名设计(UI设计),平时也要下载某些素材网站的素材。由此我接触到了第三方解析。后来做了开发,于是想研究一下他们的原理。原理:说直接点,并非破解官方网站拿到素材链接,就.
2021-02-24 17:23:58 2339
原创 centos安装redis
下载redis安装包下载地址:https://redis.io/download使用WinScp上传服务器解压缩tar -zxf redis-4.0.2.tar.gz进入压缩后的文件夹make继续进入src文件夹make install至此redis已经安装完成移到常用文件夹内比较重要的4个可执行文件:redis.conf: redis配置文件redis-server:Redis服务器程序redis-cli:Redis客户端程序,它是一个命令行操作工具。也可.
2021-02-19 20:03:22 687
原创 centos下安装mongodb
下载wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.6.tgz解压tar -zxvf mongodb-linux-x86_64-4.0.6.tgz拷贝到指定目录mv mongodb-linux-x86_64-4.0.6 /usr/local/mongodb新建目录进入cd /usr/local/mongodb新建mkdir -p data/dbmkdir -p data/log配置文.
2021-02-19 17:36:34 137
原创 centos安装pm2
前提是先安装npm,安装node默认会安装上npm。下载npm install -g pm2验证pm2 -v使用pm2守护node进程pm2 start app.js 开始进程pm2 stop id 停止进程pm2 delete id 删除进程pm2 restart id 重启进程
2021-02-19 16:29:15 795
原创 centos服务器安装nodejs
按照以下操作照着做即可,无需切换任何路径。首先在终端中使用命令 uname -a 查看系统版本x86_64 是64位的所以要安装64位对应的nodejs打开nodejs中文网里的下载 找到64位的文件点击后就下载了 这里 复制它的链接 使用wget下载 wget https://npm.taobao.org/mirrors/node/v12.14.1/node-v12.14.1-linux-x64.tar.xz下载的是tar.xz压缩文件 使用tar命令解压tar -xvf no
2021-02-19 16:13:31 329
原创 nodejs作中间层代理转发请求第三方服务器数据
中间层概念简单的一个数据发送接收流程:前端 < – -- > 后端 <- – -> 数据库node中间层:前端 < – > node中间层 < – > 后端 < — > 数据库文章:【探索】NodeJS中间层搭建——楔子实战今天抓取某素材网站资源下载资源链接时,源网站禁止访问,出现403提示。就是将下载该文件的url路径新窗口打开复制访问。很明显,该网站对访问的源头进行了校验,于是我进行了如下操作。然后,下载弹框可以正常打开,对
2021-02-04 20:19:30 2007
原创 刷新页面导致vuex数据丢失的解决办法
问题使用vuex统一管理项目状态时,如若刷新页面,会导致存在vuex的数据丢失原因js代码是运行在内存中的,代码运行时的所有变量、函数也都是保存在内存中的。进行刷新页面的操作,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。具体选择哪一个就根据你实际需求来选择。解决方法:在全局app.vue中加入以
2021-02-01 18:51:24 341 1
原创 使用nodejs封装mongodb查询、修改、增加、删除操作【单例模式】
配置mongodb数据库config.js文件const app = { dbUrl: 'mongodb://localhost:27017', //数据库地址 dbName:'test' //连接数据库名称}module.exports = app封装mongodb的CRUDdb.js文件const MongoClient = require('mongodb').MongoClient //引入mongodb模块const Config = require('./conf
2020-12-16 08:32:58 543 1
原创 使用nodejs开发对接微信公众号实现回复
实现效果使用nodejs开发后台,接收用户发送的信息,并给予回应。使用工具vs code内网映射工具ngrok,我用的小米球(安装包在文末)微信微信开发文档 文档地址微信开发测试账号 申请地址用到的包npm i express npm i sha1npm i request-promise-nativenpm i xml2js开发过程开启小米球内网映射工具,将本地服务暴露公网,可供微信服务器推送信息。如图:打开微信申请的微信测试号,在接口配置信息中URL中填入小米球
2020-12-06 16:08:37 1330
原创 喊话程序员:Sketch设计作图切图利器,你值得拥有。
为什么学习设计我是一名大学生(目前大四)职业规划:毕业后想投入到前端开发的道路我为什么学习UI设计?想要做自己的产品,自己本身是计算机专业出身,如果会UI的话,不需要美工的帮助。提高自己的审美观念以及开发时可以考虑到用户交互体验。会UI的程序猿可以感知项目全局,可以影响到开发的思维,达到更好的效果。接手外包项目,独立开发。单纯的增长自己技能,技多不压身。可能有偏前端程序猿大佬不屑于会设计,也没有这种设计的思维感知。举个栗子:从一个Button说起情景一:不会设计的程序员再了.
2020-11-25 09:22:05 402
原创 微信小程序实战教程,适合初学者快速入门。
目录项目预览关于该课程收获到的知识项目预览这是完成该微信小程序后的部分截图关于该课程3个月前,9月初进入某公司实习,要接手开发公司的微信小程序,对于从未接触过微信小程序的菜鸟我来说,要快速上手,就得找个实战项目练习。于是利用业余时间找到了这个课程,学习了从0创建开发账号到部署上线的整个过程。对微信小程序开发豁然开朗。学过VUE的同学,上手是很快的。有需要的人可以去学习哦,这是某马培训的,讲的挺好,很适合初学者。B站视频,放心点击。课程视频地址:点我直达接口文档地址:点我直达收获到的
2020-11-22 22:06:12 1832 2
原创 css如何绘制内凹圆角UI
收到的需求是什么?如下图,底部tabbar中间按钮部分。如何用css画出来呢?用到的css的知识radial-gradient:径向渐变没听过径向渐变?? 那好吧! 给你推荐个好网站百度(手动狗头)先画一个类似的图,然后对比代码进行分析上图对应的html、css如下: <style type="text/css"> .box { width: 600px; height: 50px; background: radial-g
2020-11-17 09:38:55 2679 3
原创 csv、excel格式轻轻松松批量转成json
什么是csv?逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本)怎么用?我这里使用的是nodejs。安装npm install csv-parser将要转换的csv保存为下列格式顶部第一行—属性名下方数据—值这是CSV文件示例NAME,AGEDaffy Duck,24Bugs Bunny,22使用安装好依赖后,新建文件复制下方代码。const csv =
2020-11-12 09:45:31 801
原创 前端的es6新增相关api学习记录【第一部分】
文章目录ES6语法1.ES6的let const2.解构赋值3.字符串扩展4.数值扩展5.数组扩展6.函数扩展7.对象扩展ES6语法1.ES6的let const作用域function test() { for (let i = 0; i < 2; i++) { console.log(i); } console.log(i); } test()for循环中使用let声明的变量i 只能在for{}中使用,否则会报错Unca
2020-11-08 21:42:40 145 2
原创 与ECharts的第一次邂逅
前言常见的数据可视化库:D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)ECharts.js 百度出品的一个开源 Javascript 数据可视化库Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用AntV 蚂蚁金服全新一代数据可视化解决方案 等等Highcharts 和 Echarts 就像是 Office 和 WPS 的关系ECharts介绍官网地址:https://www.echartsjs.c
2020-11-03 18:45:53 124
原创 阿里巴巴字体图标库使用方法【前端类超详细】
作为一个前端程序员,iconfont阿里字体图标库肯定有所耳闻,这里基本可以找到你想要的图标,并且提供多种格式供您选择。可能有的人会说,我们UI设计师会切好图发到我们手里。可万一要做的是自己项目,或者公司没有UI小姐姐,自己又没有PS、AI的使用能力,那么你就要依靠这个图标库了使用方法第一步-搜索图标添加至购物车这里,我选择首页和我的两个icon图标作为演示第二步-查看购物车并添加至项目点击右上角购物车图标,会展示你刚刚选择的图标,然后点击添加至项目。最好添加至项目,方便增加、修改.
2020-11-01 19:13:01 1775
原创 与微信小程序的第一次邂逅
文章目录什么是微信小程序为什么学习微信小程序哪些行业适合小程序开发微信小程序的第一次实战什么是微信小程序官方解释:微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验优点:对于使用者用户免于安装app,节省空间。微信内直接使用,方便快捷。微信流量庞大,小程序便于传播。对于开发者节省时间、开发成本等。基于微信生态开发,不用考虑手机系统。为什么学习微信小程序现在有哪些小程序微信小程序支付宝小程序字节小程序·
2020-10-27 09:17:23 361 2
原创 小程序明明已经分包了,为啥没有大小没有变???
为什么要分包真机预览时出现大于2M,无法预览。对项目进行规整划分如何分包实际操作先将需要分包的文件拷贝到小程序根目录下在app.json中配置分包结构(如图)修改被分包中的引用路径,如图片资源、导航URL可以设置分包的在哪个页面加载图中表示在进入login页面进行下载设置的分包,all表示在所有网络下。失败解决!分包了为啥还是提示大小超过2M分包的文件内所引用的外部文件也必须放到分包内然后修改引用路径,假如分包后,引用了1个根目录下的文件,是不会分包成功的,而是会打入.
2020-10-14 19:09:00 1281
原创 express框架学习笔记01
express框架学习笔记01安装npm install express --save //save自动添加package.json文件的依赖项简单示例//安装完成后引入expressconst express = require('express')//引入的express是方法赋值给appconst app = express()//端口3000const port = 3000//简单路由导航app.get('/', (req, res) => res.send('默认
2020-10-09 18:29:12 109
原创 mongodb数据库、表(集合)的增加删除;数据的增删改查操作【1】
mongodb数据库、表(集合)的增加删除;数据的增删改查操作连接数据库打开cmd—>输入mongo即可连接成功show dbs -----> 查看当前存在数据创建、查看、删除数据库使用并创建数据库use class 使用class数据库若想创建这个class数据库,则必需插入一条数据db.stuname.insert(“name”:“张三”)------->在当前的数据库下插入stuname表(集合)并插入一条数据(name:张三)查看数据库
2020-10-07 20:01:07 1087 1
原创 使用vue-ui时,浏览器打开显示空白,如何解决?
在命令窗口中使用vue ui命令调用脚手架的ui面板时,跳转浏览器后出现空白,如何解决?解决方法打开文件目录 C:\Users\Administrator 中,找到vue-cli-ui的文件夹,将其删除,然后重新运行vue ui即可正常使用。...
2020-09-05 22:06:58 3394 3
原创 jQuery实现商品放大镜效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></scr
2020-07-15 16:23:11 433
原创 验证文件上传格式是否符合规范
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>验证文件上传格式</title></head><body> <div class="uplo
2020-07-10 16:02:22 410
原创 前端关闭广告经典小案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>广告关闭案例</title> <style> * { padding: 0; m.
2020-07-10 15:44:02 431
原创 使用PHP连接MYSQL的基础操作
使用PHP连接MYSQL的基础操作使用PDO连接mysql配置请求头,防止乱码header('Content-type:text/html;charset=utf8');连接数据库的配置项$config = [ 'host' => 'localhost', 'user' => 'root', 'password' => 'root', 'db' => 'db', 'charset'=>'utf8'];使用PDO连
2020-07-08 09:52:39 159
转载 2020前端面试题
JavaScriptaddEventListener最后一个参数的作用:规定事件是冒泡还是捕获。false是冒泡,true是捕获什么是冒泡及捕获元素触发某个事件,向上级传递,直到document。捕获是从不具体的传至具体的所有事件都可以冒泡吗blur focus load unload abort不可冒泡取消事件冒泡方式function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPr
2020-06-28 11:28:11 207 1
转载 2020前端面试
1. calc、support、media各自的含义及用法?calc()函数主要用于动态计算长度值。calc()函数支持 加减乘除运算support主要用于检测浏览器是否支持某个css属性,就是条件判断,如果支持某个属性,可以写一个样式,如果不支持某个属性,可以写另外一个样式。media查询,可以针对不同的媒体类型定义不同的样式2. css水平、垂直居中的写法,请至少写出4种水平居中行内元素:text-align:center块级元素:margin:0 autoposition:a
2020-06-26 10:24:19 247
原创 js中最最最最简单的时间格式化
众所周知,时间格式化在开发中出现的频率非常高,原因是服务器返回的是一段时间戳。Vue项目中添加全局过滤器,遇到就用CV大法。Vue.filter('dateFormat', function (time) { const dt = new Date(time) //new实例 const y = dt.getFullYear() //获取年 //获取月 日 时等等 其中月默认从0开始所以+1 //使用空字符串转为string类型 //使用padStart方法补0 c
2020-06-21 16:48:15 405
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人