1、项目初始化登录功能开发
项目仓库：https://github.com/changeclass/vue-shop 项目初始化 安装脚手架 通过VUE脚手架创建项目 安装Element-ui组件库、 添加插件处安装 配置axios库 安装依赖处安装 将项目托管在GitHub中 后台配置 MySQL Node.js 后端API项目地址：https://github.com/changeclass/Tzk/tree/master/2020-11/vue-api 登录与退出 保持用户登录状态有两种方法：第一种：利用Cookie和Session，但这种方式存在跨域问题。第二种：利用token，这种方式可以避免跨域问题 登录页面的开发 通过子分支进行开发 1git checkout -b login 删除不要的组件 创建登录组件 在components中新建一个Login.vue文件。 12345678910<template><div>登录组件</div></template><scri ...
浅谈蘑菇丁自动打卡
项目说明 对于本项目第一次是基于圈x的每日任务实现的自动签到，因为圈x要跑多个签到脚本，但后来由于各种原因最终放弃了使用圈x在本地跑。因此修改为利用GitHubActions自动完成打卡任务。 项目地址：MoGuDingAutoCheckIn 食用方式任选下面两种中的一个即可。 快速开始-Coding 使用Coding的原因主要是因为GitHub自动任务存在延迟，几分钟，几小时甚至不执行。因此建议使用Coding。 这里不会讲解如何注册Coding，请自行了解。 新建项目 选择代码托管项目 然后名称路径随便写即可。 新建代码仓库 按照下图提示输入对应的内容 项目地址：https://e.coding.net/imtzk/mogudingAuto/code.git 是否导入成功 导入成功后你应该看到类似这样的界面 开启持续继承功能 点击项目左下角的项目设置 打开持续集成功能 返回到主页面 添加自动任务 接下来你将在主页面左边导航栏看到一个持续集成的选择，选择他并选择构建计划。 选择最下方的自定义构建过程 构建计划名随便写即可。 ...
6、ES6模块化和webpack打包
ES6模块化 安装babel包 1yarn add @babel/core @babel/cli @babel/preset-env @babel/node 安装@babel/polyfill依赖包 1yarn add @babel/polyfill 根目录创建文件babel.config.js 123456789101112131415const presets = [ [ "@babel/env", { targets: { edge: "17", firefox: "60", chrome: "67", safari: "11.1", }, }, ],];module.exports = { presets }; 运行命令 1npx babel-node file 导入模块 1import $ from ...
5、VUE前端路由
路由的基本概念 VueRouter基本使用 官方地址：https://router.vuejs.org/zh/ 引入相关库文件 VueRouter依赖于vue，因此需要先引入vue 12<script src="../js/vue.js"></script><script src="../js/vue-router_3.0.2.js"></script> 添加路由链接 12<router-link to='/user'>user</router-link><router-link to='/register'>register</router-link> router-link标签会被渲染成a标签，to属性则会被渲染成href属性。 添加路由填充位 1<router-view></router-view> 定义路由组件 123456const User = &# ...
4、VUE前后端交互
Ajax请求 参考：Ajax Promise 参考：Promise Axios 参考：Axios fetch 参考：fetch Async 参考：async 图书管理重构 展示列表 列表展示即后台请求数据，然后放到vue对象列表中。 请求数据使用axios进行请求，为了方便后续操作，先对axios对象设置基于地址与拦截器（直接返回相应内容）。 123456axios.defaults.baseURL = 'http://localhost:3000/';axios.interceptors.response.use(function(res){ return res.data;}, function(error){ console.log(error)}); 接下来在全局对象中定义一个方法用于获取数据 12345methods: { queryData: async function(){ this.books = await axios.get('b ...
5、VUE中的组件
组件 组件就是可复用的单元模块。 组件的data部分是一个函数，返回值是一个对象，在这个对象中传递要传递的值。 1Vue.component('组件名称', {组件选项}) 组件名称遵循自定义组件命名规范：全小写、连字符（虽然驼峰式一般也没问题） 组件选项与 new Vue 选项配置基本一致（也有一些细节的不同） 全局组件通过Vue对象进行创建，局部组件通过在组件的内部属性components创建。 123456new Vue({ ..., components: { '组件名称': {组件选项} }}) data 在非 new Vue 的组件中，data 必须为函数，函数返回值必须是一个对象，作为组件的最终 data 1234567components: { 'xk-circle': { data() { return {pi: 3.14& ...
3、VUE组件开发
组件注册 1234Vue.component(组件名称,{ data:组件数据, template:组件模板内容}) 简单用法 12345678910111213Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button @click="add">点击了{{count}}次</button>', methods: { add() { this.count++ } },}) 123<div id="app"> <button-coun ...
2、VUE常用特性
表单操作 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172<body> <div id="app"> <form action="http://itcast.cn"> <div> <span>姓名：</span> <span> <input type="text" v-model="uname" /> </span> </div> <div> <span>性别：</span> <span> ...
1、VUE模板语法
基本使用 使用Vue的步骤 需要提供标签用于填充数据 引入VUE.js文件 可以使用vue的语法做功能 把vue提供的数据填充到标签里 1234567891011121314151617<body> <div id="app"> <!-- 插值表达式 可以做简单的运算 --> <h1>{{title}}</h1> </div> <script src="../js/vue.js"></script> <script> new Vue({ // 元素挂载的位置，可以是CSS选择器或者DOM元素 el: '#app', // 模型数据 data: { title: 'x ...
