- 博客(51)
- 收藏
- 关注
RSS订阅原创 小白入门前端webpack这个打包编译工具
作用：开发和打包的工具，可以将js、css转换成一个静态文件，减少页面请求。基本使用从创建文件目录，到基本可以简单打包的一个操作：// 全局安装webpacknpm install -g webpack webpack-cli// 安装css-loader和style-loader插件，因为webpack本身只能处理js模块，处理其他类型的文件需使用loader进行转换。// css-loader 是将 css 装载到 javascript；style-loader 是让 javascr
2020-08-26 16:48:09
383
原创 node之fs文件系统的基本使用
主要说的异步的操作，同步操作的用法具体可以见官方文档，推荐使用异步操作。writeFile：向文件写数据，会覆盖掉原来的内容。const fs = require("fs");fs.writeFile("./1.txt","哈哈哈哈",err=>{ console.log(err) if(err) throw err; console.log('写数据成功') fs.appendFile("./1.txt","\n我是来追加的\n",()=>{});
2020-07-26 21:42:45
297
原创 express从零开始架构个人博客服务端项目
很多时候写express项目大都是用生成器自动生成的项目结构，基本用法就是在router文件夹中写接口，在app.js中进行使用。router文件中的一个js文件既要进行数据库操作，又要写业务逻辑，这样的写法容易导致后期代码都堆积在一起了，不好维护，可读性也很差，并且有很多重复代码。小编就已经踩过此坑了，现在决定尝试采用数据库操作，业务逻辑，路由分开的方式重新自己从头写一下个人博客的接口项目结构。写好一个项目，首先要有一个好的开始（架构）。构建项目结构首先创建一个server文件夹，然后初始化这
2020-07-23 21:47:39
404
原创 关于vue-cli4创建的项目打包的问题
使用vue-cli4创建的项目写完后，直接执行npm run build打包，点开dist文件夹中index.html文件。没错，啥都没有。看控制台，报错了经百度搜索，发现需要配置一下路径。根目录下新建一个vue.config.js文件，文件中写下下面三行代码。module.exports={ publicPath:"./", //用法和webpack本身的output.publickPath用法一致}重新打包，浏览器打开index.html文件，完美，一切正常显示了。具
2020-07-23 17:08:52
914
原创 虚拟DOM之Snabbdom的使用
Snabbdom是一个虚拟DOM库。parcel是一个打包工具，使用非常简单，0配置。创建Snabbdom项目结构的基本步骤：//创建项目目录md snabbdom-demo//进入项目cd snabbdome-demo//创建package.jsonnpm init或yarn init -y//本地安装parcel-bundlernpm install parcel-bundler或yarn add parcel-bundler//在package.json文件中，scri.
2020-07-11 10:03:56
832
原创 前端杂乱小知识点（一）
vue项目富文本编辑器可以使用vue-quill-editor，注意对此富文本写样式的时候要写成全局样式，不然不生效（即写在App.vue中）
2020-06-29 16:13:09
161
原创 Vue-Quill-Editor富文本使用笔记
<template> <div class="hello"> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @focus="onEditorFocus($event)" @blur="onEditorBlur($event)" @change="onEditorChange($event).
2020-06-29 14:42:33
394
原创 node使用crypto进行md5加密，生成唯一用户Code
const crypto=require("crypto");//调用了digest()以后就不能再使用hash对象了，方法封装const md5Crypto=(str)=>{ const hash=crypto.createHash('md5'); hash.update(str); //加密后是二进制的，不好看，转换成16进制，并且字母大写 return hash.digest("hex").toUpperCase();}console.log(md5.
2020-06-29 11:49:16
728
1
原创 如何在express项目中部署多个前端项目
项目目录结构如下，manage和web文件中分别存放两个打包后的前端项目。在app.js中配置如下两句代码，即可使得/路径时打开的是web文件夹中的index.html页面，/manage路径时打开的是manage文件下的index.html页面。更多项目同理。app.use('/',express.static(path.join(__dirname, 'web')));//web端app.use('/manage',express.static(path.join(__dirname,
2020-06-17 21:35:01
1214
1
原创 关于vue-cli的版本问题
vue-cli2里面是有config文件夹和build文件夹的，在打包的时候可以直接用来进行webpack的相关配置。而在vue-cli3中是没有这两个文件加的，因为vue-cli3直接集成了webpack。安装vue-cli3的方法是：npm install @vue/cli -g。如果已经安装过vue-cli2了，先卸载：npm uninstall vue-cli -g。vue-cli3创建项目的方式是vue create 项目名称。安装vue-cli2的方法是：npm install...
2020-06-16 22:28:32
547
原创 原生js实现图片上传预览
<label for="file">上传图片</label><input id="file" type="file" name="file" onchange="changepic()"></input><img src="" id="show" width="200"><script> function changepic() { const reads = new FileReader(); const .
2020-06-15 14:42:23
801
2
原创 使用Font Awesome图标最简单的方式
1、首先进入官网的开始使用页http://www.fontawesome.com.cn/get-started/，然后在箭头指向处输入自己的邮箱，点击发送邮箱。2、收到邮箱，按照邮箱内容的指示注册Font Awesome CDN3、注册成功后即可进入Font Awesome CDN看到脚本链接，将脚本链接复制到自己的html页面，接下来就可以愉快的使用图标了。4、更加详细的使用方法见官网的案例http://www.fontawesome.com.cn/examples/...
2020-06-12 14:29:06
1297
原创 node实现发送邮件功能
以qq邮箱为例：1、登录qq邮箱——设置——账户，开启里面的SMTP服务，具体操作可参考QQ帮助中心。开启成功以后就可以生成授权码啦。2、安装nodemailer插件，新建一个test.js文件，写下如下几行代码const nodemailer=require('nodemailer');// 1、创建const transport=nodemailer.createTrans...
2020-01-06 13:53:06
534
原创 使用宽度为0实现凹凸形状
直接上代码：<div></div>div { width:0; font-size: 50px;}div:before { /* content: '好 easy 好';凸 */ content: 'easy好easy '; outline: 10px solid blue;}一个宽度为0的div元素，配上一个伪...
2019-12-13 15:08:44
229
1
原创 JS对数据进行分组
被分组数据类型：包含n多个对象的数据代码示例：let data = [ { key: 'xxx', name: 'yiyi', age: 12, money: 10 }, { key: 'sss', name: 'iii', age: 13, money: 100 }, { key: 'ddd', name: 'ooo', age: 13, money: 50 }...
2019-12-13 11:02:35
6261
4
原创 vue中data需要使用return来返回数据的原因
敲重点：避免变量污染不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 ...
2019-12-09 17:10:54
2261
原创 table标签和div标签布局的优缺点
table优点：开发时间短（使用DW开发速度快）；纯table各浏览器不会有兼容问题；内容可自适应；在搜索引擎排名能靠前table缺点：如果布局变更，需要重新开发；如果table里有div ul 等，可能会出现浏览器兼容问题；加载速度慢；table套table，会让维护人员非常难受div优点：内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候，效果最明显...
2019-11-15 09:02:22
1215
原创 页面切换出现抖动
终于发现问题了，一直以为是宽度的问题，可是明明宽度都一样，原来是因为滚动条的出现引起的。设置下面的样式就解决问题了html{ overflow-y:scroll}...
2019-08-16 11:15:17
2282
原创 vue+express前后端项目一起配置成https请求
1、首先到阿里云服务器上面申请证书，申请完成以后下载下来（nginx服务版本的），解压出来两个文件，文件后缀是.key和.pem，最好把这两个文件名改成自己的域名。具体申请证书的步骤自行百度。2、将vue项目里面的config文件夹下面的prod.env.js文件中加上一句：BASE_URL:'"https://xxx.xxx.xx.xxx"'，xxx.xxx.xx.xxx是自己服务器的ip，...
2019-08-16 09:17:51
2124
原创 vue项目打包放到服务器
接之前已经将后端代码放到服务器1、进入config文件夹下面的index.js文件，将dev和build对象里面的assetsPublicPath属性值都进行更改。由assetsPublicPath:"/"改为assetsPublicPath:"./"接着，所有的请求接口去掉http://localhost:3000，直接保留原来的路由路径（因为打包以后会放到服务代码下...
2019-08-14 13:39:33
3158
原创 如何将express搭建的后台代码部署到服务器域名访问
1、首先端口修改：个人阿里云服务器开放的端口是80(http)和443(https)，所以要把监听的端口改成80。进入bin文件夹下面的www文件，将server.listen(port)改成server.listen(80)2、为了方便看结果，在views文件夹下建立一个test.html文件，写上“欢迎学习Vue”，并默认首先打开这个文件。express默认的模板引擎是.j...
2019-08-14 10:11:31
4390
1
原创 域名解析步骤
1、前提条件：购买的服务器和域名已经备案，云服务器已经设置好网站环境和已经创建网站并绑定了域名2、进入控制台找到自己买的域名3、点击右边的解析—点击添加解析按钮4、添加解析页面填写对应信息(记录类型默认A、主机记录用www、解析路线不改、记录值就是服务器的公网ip、TTL值不改)5、确认以后就可以返回域名解析列表了，完成...
2019-08-07 09:15:51
2787
原创 if..else嵌套过多导致代码层级不好看的解决方案
工作中遇到了一个判断条件很多，逻辑稍微复杂的东西，写完以后发现嵌套了好几层if else，看着特别难受，在大佬指导下使用了取反条件return跳出来优化了代码。两次代码如下：修改前，写成这样强迫症都快犯了，自己写的代码自己都不想看。 // 确定 btnSave.on("click", function () { if (!form.validate()) retu...
2019-07-12 10:24:21
9398
原创 微信小程序post和get请求头header的区别
1、post请求：wx.request({ url: obj.url, data: obj.data, method: "post", header: { "content-type":"application/x-www-form-urlencoded" }, success: (res) => { callba...
2019-07-10 09:36:19
10489
4
原创 Mpvue和Express前后分离构建微信小程序
前提：已经安装node环境和vue-cli脚手架，已注册小程序。1、执行以下命令，生成前端项目结构vue init mpvue/mpvue-quickstart project2、执行以下命令全局安装express脚手架和expressnpm install -g express-generatornpm install express -g进入要将项目建立的位置，执行...
2019-07-09 18:32:37
256
原创 express框架中使用nodemon实现服务自启动
首先，安装nodemonnpm install nodemon --save然后在package.json文件中配置"scripts": { "start": "tsc && node app.js", "dev": "nodemon" // npm run dev}最后命令行中执行npm run dev命令启动就好了。这是一种最快捷的方式...
2019-07-02 18:21:53
1303
原创 css方式让div居于屏幕正中间
绝对或者固定定位，然后设置属性如下：top:50%;left:50%;transform: translate(-50%,-50%);百分比+CSS3新属性完美搭配
2019-06-28 14:09:01
14406
2
原创 html和javascrip实现下拉菜单
<body> <form action=""> <select name="week" id="week" onchange="change()"> <option value="1" selected="selected">星期一</option> <option...
2019-06-18 14:40:54
322
转载 vue 项目中assets文件夹与static文件夹引用的区别
首先，assets文件夹和static文件夹在vue-cli生成的项目中，都是用来存放静态资源的。1、assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。build的时候由Webpack解析为模块依赖。2、static/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件...
2019-06-08 13:57:52
2927
原创 vue+express博客项目中插入富文本编辑器
安装mavon-editor。npm install mavon-editor --save在要插入富文本的页面引入mavon-editor。import mavonEditor from "mavon-editor";import "mavon-editor/dist/css/index.css";Vue.use(mavonEditor);使用mavon-editor组件...
2019-02-27 11:47:58
492
原创 vue-router实现博客系统文章页面的伪静态
express+vue搭建个人博客，如何实现博客文章的伪静态，让每一篇文章都相当于是一个html页面，方便百度引擎收入呢？经过两天的摸索，终于找到了解决办法：利用vue-router的params属性来实现。vue-router有两种传参方式，一种是query属性配合着path属性，一种是params属性配合着name属性，详细用法可去官网上看。query的传参会跟在请求的网址后面，到新的...
2019-02-26 22:24:21
3202
2
原创 Koa2实现电影微信公众号前后端开发学习视频及源码
链接：https://pan.baidu.com/s/17jWIYDcBIXvrIKLEPhfGkA 提取码：nj3d
2019-02-26 08:57:24
2433
3
原创 ES6+开发电商网站的账号体系学习视频
链接：https://pan.baidu.com/s/1GP-YZRQ6ld25sc95J35eWw提取码：oxsh
2019-02-25 17:20:50
285
原创 express从mysql数据库获取数据
1、首先npm install mysql --save安装mysql2、在server文件夹下新建config文件夹，config中新建db.js文件，代码如下：// 创建数据库连接const mysql = require("mysql")const connection = mysql.createConnection({ host: "101.132.36.129",...
2019-02-12 15:25:32
3165
原创 mysql数据库写入中文报错解决办法
当像数据库里面添加中文数据时保存或者下一条报错1366-Incorrect string value:"\xE5\xA5\XBD..."for column "content" at row 1。解决办法：右键此表的设计表，将该列的字符集改为utf8保存就可以了。...
2019-02-12 14:49:16
572
原创 express+vue前后端分离跨域问题解决办法
项目前端是vue-cli生成的项目结构，后端是express的生成器生成的目录结构。1、express后端项目中安装cors，并在app.js文件中引入cors，写下如下几行代码var cors = require('cors');//跨域app.use(cors({ origin:['http://localhost:8080'], methods:['GET','P...
2019-02-11 22:17:26
716
原创 Koa2实现电影微信公众号前后端开发学习视频
百度网盘链接：https://pan.baidu.com/s/1UkcbuLf454qrOz_MB4dLlw提取码：3v7n欢迎关注，日后有资料分享给大家一起学习
2018-12-18 14:47:13
2106
9
原创 git本地上传项目到码云
最近摸索着将项目放在码云上，这样就可以随时随地编写和获取了，不用固定在一台电脑上。经过一番摸索，终于配置成功了。步骤如下： 1、安装git，创建码云账号（本文章是在本人已安装git，已有码云账号的前提下）2、打开git bash，执行ssh-keygen -t rsa -C "码云上面的邮箱"，生成秘钥和公钥。3、找到.ssh文件，打开公钥文件，复制里面的公钥。在码云进入个人主页...
2018-12-12 11:24:52
136
转载 小程序Demo报{"code":-1,"error":"`QcloudSecretId`不能为空，请确保 SDK 配置已正确初始化"} - 小程序
开发小程序遇到个错误：{"code":-1,"error":"QcloudSecretId不能为空，请确保 SDK 配置已正确初始化"}遇到这个错误的原因是：腾讯不再帮助用户无感知的申请腾讯云云 API 密钥，受此影响，腾讯云微信小程序解决方案 Wafer2 提供的 sdk.config.json 中的 qcloudSecretId 和 qcloudSecretKey 字段将为空，这会导致登...
2018-12-04 14:38:04
1691
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人