Vue+koa2开发一款全栈小程序(1.课程介绍+2.ES6入门)

时间:2021-07-15 09:03:40

1.课程介绍

1.课程概述

1.做什么?

Vue+koa2开发一款全栈小程序

2.哪些功能?

个人中心、图书列表、图书详情、图书评论、个人评论列表

3.技术栈

小程序、Vue.js、koa2、koa-router、mysql

2.课程亮点

1.项目前后端分离开发

Vue+koa2开发一款全栈小程序

2.完整流程,一步不少

注册小程序账号,前后端开发,打包,正式上线

2.小程序环境搭建

1.后台地址:

https://mp.weixin.qq.com/

2.文档地址:

https://developers.weixin.qq.com/miniprogram/dev/index.html

3.开发工具下载地址:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

1.账号注册:

1.立即注册

2.邮箱激活+身份验证+手机验证码+微信扫码认证

3.进入后台管理系统

4.填写小程序信息

5.下载开发者工具

6.在自己的电脑上安装微信开发者工具

7.扫码登录开发者工具,选择小程序,新建个项目,勾选【建立普通快速启动模板】,点击确定。

8.在微信公众平台选→开发→小程序开发,可以看到一些简易教程

2.小程序开发入门

1.文件结构

Vue+koa2开发一款全栈小程序(1.课程介绍+2.ES6入门)

2.常用api

https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html

3.常用组件

3.为什么要vue.js?

1.小程序原生不能使用npm,使用第三方包的方式太原始

2.需要为小程序单独开发代码,不能和web系统重用

3.开发效率和学习成本(小程序特有的语法)

3.ES6入门学习

1.ES6是什么?

  JavaScript新的语法标准,现在流行的库,基本上都基于ES6构建

2.ES6新语法讲解,作用域,字符串,函数

1.定义变量用let代替var,let是块级作用域

2.Const定义不可修改的变量

3..作用域和{}

const name='woniu'
console.log(`hello ${name} !!!`)

4.箭头函数

const double=(num)=>num*2

console.log(double(3)) //
const add=(num1,num2)=>{
let num2=num2||1 //默认num2是1
return num1+num2
} console.log(add(3,4) //
console.log(add(3)) // let arr=[5,6] console.log(add(...arr) //11 用...可以将一个数组的每个元素取出来
console.log([1,2,3,...arr]) //[1,2,3,5,6]  ...可以做数组的拼接

5.对象的扩展

const key='job'
const obj={
num:1,
str:'woniu',
work(){
},
[key]:'fe',
[key+'world']:'fei'
} console.log(obj)//{num:1,str:"woniu",work:f work(), job:"fe",jobworld:"fei"}

6.解构赋值

let arr=[1,2]

let[num1,num2]=arr

console.log(num1,num2)//1 2

Vue+koa2开发一款全栈小程序(1.课程介绍+2.ES6入门)的更多相关文章

  1. Vue+koa2开发一款全栈小程序(5.服务端环境搭建和项目初始化)

    1.微信公众平台小程序关联腾讯云 腾讯云的开发环境是给免费的一个后台,但是只能够用于开发,如果用于生产是需要花钱的,我们先用开发环境吧 1.用小程序开发邮箱账号登录微信公众平台 2.[设置]→[开发者 ...

  2. Vue+koa2开发一款全栈小程序(3.vue入门、Mpvue入门)

    1.Vue-cli 1.新建一个vue项目 打开cmd 官方命令行工具 npm install -g vue-cli //安装脚手架 cd到你想要存放demo的目录下,然后 vue init webp ...

  3. Vue+koa2开发一款全栈小程序(6.个人中心)

    1.用户信息的获取和展示 1.初始化数据库 cd到server目录下,执行 node tools/initdb.js 登录mysql控制界面,查看初始化以后生成的表 show databases; u ...

  4. Vue+koa2开发一款全栈小程序(9.图书详情页)

    1.获取图书详情 1.修改server/controllers/bookdetail.js为 const {mysql}=require('../qcloud') module.exports=asy ...

  5. Vue+koa2开发一款全栈小程序(8.图书列表页)

    1.图书列表页获取数据 1.在server/routes/index.js中新增路由 router.get('/booklist',controllers.booklist) 2.在server/co ...

  6. Vue+koa2开发一款全栈小程序(7.图书录入功能)

    1.图书录入功能 1.获取图书信息 1.在mydemo/src/until.js中封装工具函数post和get // 工具函数 import config from './config' // htt ...

  7. Vue+koa2开发一款全栈小程序(4.Koa入门)

    1.Koa是什么? 基于nodejs平台的下一代web开发框架 1.Express原班人马打造,更精简 2.Async+await处理异步 3.洋葱圈型的中间件机制 新建一个koa项目 1.打开cmd ...

  8. 微信小程序云开发-从0打造云音乐全栈小程序

    第1章 首门小程序“云开发”课程,你值得学习本章主要介绍什么是小程序云开发以及学习云开发的重要性,并介绍项目的整体架构,真机演示项目功能,详细介绍整体课程安排.课程适用人群以及需要掌握的前置知识.通过 ...

  9. 从零开发一款自己的小程序UI组件库(一)

    写在前面:有开发过小程序的朋友肯定知道组件化开发的特性,高内聚与低耦合.使用已有的UI组件库,诸如:vantUI-weapp.minUI-weapp等UI组件库的诞生使我们的开发速度大大的加快,丰富的 ...

随机推荐

  1. JS二维数组排序组合

    需求是这样的:http://q.cnblogs.com/q/29093/ 这里简述一下: 现在有一个不确定长度的数组.比如:var temp=[["Fu","Hai&qu ...

  2. BZOJ 3270: 博物馆

    Sol 期望DP+高斯消元. 根据本题题意列出期望方程\[E(i,j)=(1-p_i)(1-p_j)E(u,v)+(1-p_i)p_jE(u,j)+p_i(1-p_j)E(i,v)+p_ip_jE(i ...

  3. centos6 系统优化脚本

    #!/bin/bash # 检查是否为root用户,脚本必须在root权限下运行 # if [[ "$(whoami)" != "root" ]]; then ...

  4. sql sever 2008修改数据类型

    如果是新表,直接在表中修改: 如果不是新表,则须sql语句修改 附sql语句 alter table 表名 alter column 列名 新的数据类型

  5. 【ASP.NET 进阶】获取MP3文件信息并显示专辑图片

    突发奇想,想弄个显示MP3文件信息和专辑图片的小Demo,个人不是大牛,遂百度之,总算搞定,现分享如下. 效果图: GIF效果图: 主要是依靠2个DLL文件:ID3.dll 和 Interop.She ...

  6. ubuntu文件夹右键没有共享选项

    在配置samba的时候,不知道出了什么错误,我就删除了samba,之后在ubuntu文件上按右键就没有共享的选项了,这样每次配置都得进samba麻烦. 我重新安装了samba也不行,郁闷! 解决: 1 ...

  7. php的public、protected、private三种访问控制模式的区别

    public: 公有类型 在子类中可以通过self::var调用public方法或属性,parent::method调用父类方法 在实例中可以能过$obj->var 来调用 public类型的方 ...

  8. 初识io流条件状态

    一  流状态    C++中的输入输出系统负责记录每一个输入输出操作的结果信息,这些当前的状态信息被包含在io_state类型的对象中.io_state是一个枚举类型(就像open_mode一样),以 ...

  9. 获取listview当前滚动的高度

    public int getScrollY() {      View c = mListView.getChildAt(0);      if (c == null ) {          ret ...

  10. 使用requireJs的方法

    在你们对requireJs初步了解后,快来看看他们是怎么使用的吧. 在你下载完成require.js插件后,在页面里引入,在require.js 加载完之后,会查找页面上script标签的data-m ...