Jason's Blog

Jason学习和分享笔记的地方

0%

2019年总结

2019-2020是我奋发前进的一年,有了整体职业方向,前端工程师的路上有坎坷有迷茫。

这一年 因为整天在工作室敲代码,没有陪女朋友,又加上直男言论,无数次分手。万般无奈,因为我知道,我一个二流学校出身的人,我不拼命武装本事,毕业就是失业。

看到工作室学长春招进了头条我就更加了。仿佛一束光,我觉得我也能行。智力比不过,比勤奋嘛。

这一年的流水账

寒假

原生js写淘宝,学了大几个月的js却不知道怎么用,变量提升啊,轮播图啊,真是开啃荒地一般艰难,完全坚持不下去,想过放弃。

上半年

开学边学小程序边学了es6,因为小程序大赛时间紧迫,简单学习,直接就开撸了。写出来的代码不怎么样。但还是费劲心思把基本的功能实现了。最后功亏一篑,没有得奖。

期末到 暑假

阅读全文 »

初识KOA(上)

新一代node框架入门,前置知识:node基础,数据库基础,了解Koa怎么搭建服务器的,不适合通读,推荐跟文章实际操作(手把手教学)

如果有知识点未知请看:

ejs
koa文档
前端er,你真的会用 async 吗?
async/await 应知应会
如何避开 async/await 地狱

之前对JS异步,这一块有点生疏,多看点博客

简介

Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。 Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序。

1.新建文件夹

初始化package.json,终端输入

npm init --yes

阅读全文 »

1024程序员节+项目总结+日常

今天程序员过节,自己呢,从学生向程序员慢慢进发了。

学习了一年多,觉得自己也算是入门前端这个领域了。虽然是很日常的一天,但纪念第一次有了从学生到程序员的认同感的节日是有意义的。

说说我今天日常的一天。

上午买了腾讯课堂的项目部署打折,这个商城项目写得也差不多了,在手机上测试了一下,修改了一些些bug

1.点击商品详情页商品信息重复没有刷新

是由于之前为了页面不刷新加了<keep-alive>导致所有页面重复加载就不会触发刷新。

在router index.js 文件下 meta: { keepAlive:false //不需要被缓存的组件 }在不需要缓存的页面加上配置。

在App.vue 文件下 对需要缓存的页面做一个判断

1
2
3
4
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
阅读全文 »

初识断点调试

之前用console.log调试,比较麻烦,发现断电调试非常好用

使用VS Code调试node

  • 打开vscode

1564132432137

点击调试虫子,然后添加配置,使用node

1564132500339

添加之后发现多了一个文件,进去修改配置

1564132604123

开始调试

阅读全文 »

阿里云部署项目新手教程(一)

(购买服务器,免密登陆)

购买服务器

阿里云有学生优惠10元一个月,我选择的是轻量应用服务器,有ssd内存,更高的带宽,但是限量1000G应该够用。选择系统镜像CentOS操作系统。

轻量应用服务器操作起来更简单。

1572003725828

1572004461160

如何远程连接

打开cmd终端输入ssh root@0.0.0.0root表示根用户名@后面接公网IP地址

连上来了

阅读全文 »

vue.js商城项目(三)

(filter)精度价格

在很多电商项目中,有许多价格标签需要精确到小数点后两位。

创建一个js文件

1
2
3
export function toMoney(money = 0) {
return money.toFixed(2)
}

精确到小数点后两位

在需要的文件引入

import {toMoney} from "@/filter/moneyFilter.js"

script中写filter方法

1
2
3
4
5
6
7
filters:{

moneyFilter(money){

return toMoney(money)

}
阅读全文 »

复习CSS的笔记

水平垂直居中

html

1
2
3
<div class="container">
<div class="child"></div>
</div>
  • 使用flex方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.container {
margin: 0 auto;
width: 300px;
height: 200px;
background: deepskyblue;
display: flex;
/* 实现元素水平居中 */
justify-content: center;
/* 实现元素垂直居中 */
align-items: center;
}
.child {
width: 100px;
height: 100px;
background: #fff;
}

  • CSS 移动外边距方法

1571047255135

使用absolute百分比移动时,是按左上角点移动的,修正宽高的一半

1
2
3
4
5
6
7
8
9
10
11
12
.child {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
/* 下面两种方式均可 */
/* margin-top: -50px;
margin-left: -50px; */
transform: translate(-50%, -50%);
background: #fff;
}
阅读全文 »

实现socket点对点,群 通讯

Java语言不太熟悉,根据老师的思路,实现了 node websocket的简单通讯,前台用的vue。

eg1

通信原理

当客户端要和服务端建立 WebSocket 连接时,在客户端和服务器的握手过程中,客户端首先会向服务端发送一个 HTTP 请求,包含一个 Upgrade 请求头来告知服务端客户端想要建立一个 WebSocket 连接。

1
2
3
4
5
6
7
8
9
request head:
...
Connection: Upgrade // 告诉它要升级协议
...
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Key: EYW+TeBXX1QDdU5T5/XQ6g==
Sec-WebSocket-Version: 13 // 协议版本
Upgrade: websocket // 升级到websocket协议
...

简单聊天项目架构

socket简单通讯

用户登陆

由于时间有限,只做了输入用户名登陆

阅读全文 »

vue.js商城项目(七)

数据提纯

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
fs.readFile('./goods.json', 'utf8', function(err, data) {
let newData = JSON.parse(data)
let i = 0
let pushData = []
newData.RECORDS.map(function(value, index) {
if (value.IMAGE1 != null) {
i++
console.log(value.NAME)
pushData.push(value)
}
})
fs.writeFile('./newGoods.json', JSON.stringify(pushData), function(err) {
if (err) console.log('写文件操作失败');
else console.log('写文件操作成功');
});
});

提取有图的json数据

存入mongoose

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
fs.readFile('./newGoods.json', 'utf8', (err, data) => {
data = JSON.parse(data)
let saveCount = 0
const Goods = mongoose.model('Goods')
data.map((value, index) => {
//console.log(value)
let newGoods = new Goods(value)
newGoods.save().then(() => {
saveCount++
console.log('成功' + saveCount)
}).catch(error => {
console.log('失败:' + error)
})
})

1570762124307

双栏列表

1571132512573

前端axios请求后台,后台查询数据库

阅读全文 »

vue.js商城项目(二)(楼层导航)

轮播图在上个笔记讲了,可以用vant内置轮播图组件也可以用swiper组件,组件化形式写一个楼层推荐

首页布局

先看效果图,大概就是这样

1568898689120

1568898707521

index.js引入路由

1
2
3
4
5
6
7
8
9
10
import ShoppingMall from '@/components/pages/ShoppingMall'
Vue.use(Router)

export default new Router({
routes: [{
path: '/',
name: 'ShoppingMall',
component: ShoppingMall
}]
})

jsonServer模块模拟json数据

阅读全文 »