搜索

前端学习总结，经验分享，项目经验分享过程(vue.js项目)

程序源代码

共 15584字，需浏览 32分钟

 · 2020-10-09

前言

来，和魔王哪吒总结一下，分享一下自己对前端学习总结，经验分享，以及写过的项目经验分享过程。

如果觉得还不错的话，浏览的过程中，需要您：

  • 点赞，分享，评论
  • 有钱的捧个钱场，没钱的捧个人场

技术实践、读书笔记、编程技巧、随笔杂谈、原创翻译，漫谈自己人生感触

学习总结

hello，大家好，来给大家分享我的专业学习经验和日常学习经验。对于编码的学习，我认为基础知识和编程实践是最重要的。刚开始学习前端的时候，是将基础知识学习一遍，所用教材可以靠学校发的教材即可。基础学习过后，最重要的就是实践，可以不断做一些模仿网站，以及到最后自己设计网站等。

收藏平时交流的信息：

  • 技术学的再好，没有开发经验，和产品经验，是很难写出好的代码。因为写代码本身是带有目的性的，解决问题。
  • 如果在校，学习程序很迷茫，是因为不知道学这个用来干嘛，自身没有想做的东西，所以就很迷茫，不知道学什么，为什么要学。
  • 工作，要对一个产品了解到什么深度，代码就越健壮。
  • 学习方式是有捷径的避开所有看不懂学习资料，找看的懂的，拿起一本资料或者网上找的资料，细度几分钟，看不懂直接找早别的资料
  • 有可能能力未达到 所有看不懂 也有可能 资料本身描述 很难懂 更有可能 资料描述不适合自己阅读习惯
  • 优先 实现功能 再考虑优化

那么你是否自己坚持了呢？当你想要学习，拿起手机时，你会不会发现，你已经不知不觉偏离了正轨，从娱乐新闻到头版头条，微信99+未读的消息，你心里想的就是看一会儿，就看一会儿。结果不知不觉时间过去了10分钟，半小时，1小时溜走了。然后你开始焦躁，后悔，自责，但是到了第二天，你又掉进了相同的坑里。

你会不会也很纳闷，为什么我的自制力这么差，为什么有些东西让我欲罢不能，因为你已经上瘾了，有个实验小白鼠遇到电流会躲避，但是奇怪的现象发生了，小白鼠不但没有躲避，反而一次又一次的自我电击，经过发现，原来是实验中不小心把某位置弄错，刚好刺激了快感中枢的位置。所以，你也许就像这小白鼠一样上了瘾。

一个真相是，科技巨头们在社交软件视频平台，网络游戏中精心布置了一个又一个沉迷的钩子，目的就是为了截取更多的用户，获取他们的更多时间和金钱，我们正在被一个算法和娱乐所包裹的电子海洛因中，但很多人却不自知，那么如何摆脱上瘾的行为呢？

就是去了解让人沉迷于网络的钩子：

  • 可望而不可即的诱人目标
  • 无法抵挡无法预知的积极反馈
  • 渐进式的进步和改善的感觉
  • 越来越困难的任务需要解决，但暂未解决的紧张感

如，你发布了某消息，你会去暗中观察，有没有人给我点赞，写文章，有没有人给我点赞，有没有人给我评论等等。（我很期待！！！）

其实你可以把这些钩子投入学习中，把学习当做兴趣，升级打怪，不断提升自己。

你的选择

自己的人生自己选择，你可以选择一条简单的路，选择沉迷在你的手机里，刷视频，打游戏，煲剧，毫不费力的收获大把大把的快乐，你也可以选择一条更加艰难的路，选择自律，选择延迟慢走，选择成长。

用你的右手做什么，由你自己决定

项目经验

下面研究封装工具代码块：

权限控制等信息auth.js

用来存储localStorage 本地缓存的方法

// 操作用户token

export function setToken(value) {
 uni.setStorageSync('token', value);
 console.log('存储用户信息成功');
}
export function getToken() {
 let token = uni.getStorageSync('token');
 return token;
}
export function removeToken() {
 uni.removeStorageSync('token');
}

操作用户信息代码如下：

export function setUserInfo(value) {
 try {
  let newValue = JSON.stringify(value);
  uni.setStorageSync('userInfo', newValue);
  console.log('存储用户信息成功');
 } catch (e) {
  return;
 }
}

export function getUserInfo() {
 let userInfo = uni.getStorageSync('userInfo');
 console.log('userInfo获取用户信息成功', userInfo);
 if(userInfo) {
  return JSON.parse(userInfo);
 }
}

项目主题颜色封装：

export function setConfig(value) {
 try {
  let configColor = JSON.stringify(value);
  uni.setStorageSync('configColor', configColor);
  console.log('存储主题颜色成功');
 }catch(e){
  return;
 }
}

export function getConfig() {
 let configColor = uni.getStorageSync('configColor');
 if(configColor){
  return JSON.parse(configColor);
 }
}

获取推荐人id

export function setRecommend(value) {
 uni.setStorageSync('recommend', value);
 console.log('recommend', value);
}

export function getRecommend() {
 let recommend = uni.getStorageSync('recommend');
 return recommend;
}

如果你需要用来存储项目内使用的第三方api key，可以创建keys.js文件：

let txMapKey = 'xxxx' // 腾讯地图的key

export {
 txMapKey
}
封装必不可少的支付功能：

创建文件pay.js，代码如下：

微信公众号支付

// description:微信公众号支付
// data 微信支付请求成功之后返回的支付参数
// payParams {object} 微信支付需要的参数

function onBridgeReady(data, payParams) {
 window.WeixinJSBridge.invoke('getBrandWCPayRequest', {
  appId: data.appId,
  timeStamp: data.timeStamp,
  nonceStr: data.nonceStr,
  package: data.package,
  signType: data.signType,
  paySign: data.paySign // 微信签名
}, function(res) {
  // console.log(res);
  if(res.err_msg === 'get_brand_wcpay_request:ok') {
   // 支付成功页面
   if(payParams.type === 'SHYY') {
    toastMsg('correct','支付成功');
    setTimeout(()=>{
     router.push('/home');
    },500);
  }else{
   router.push({
    path: '/success',
    query: {
     orderId: payParams.orderId,
     totalFree: payParams.totalFree
    }
   });
  }
 }else if(res.err_msg === 'get_brand_wcpay_request:fail') {
 // 支付失败
  return alert(res.err_desc);
 }else{
 // 跳转订单详情
 toastMsg('warn', '支付取消');
 }
});
}

支付宝支付

/**
 * 支付宝支付
 */
function alipay(res) {
 console.log('调起支付alipay',res);
 uni.requestPayment({
  provider: 'alipay',
  orderInfo: {
   "dealId": res.dealId,
   "appKey": res.appKey,
   "totalAmount": res.totalAmount,
   "tpOrderId": res.tpOrderId,
   "dealTitle": res.dealTitle,
   "rsaSign": res.rsaSign,
   "bizInfo": res.bizInfo
  }, 
        //订单数据
  success: function(res) {
   console.log('success:' + JSON.stringify(res));
  },
  fail: function(err) {
   console.log('fail:' + JSON.stringify(err));
  }
 });
}

微信小程序支付

function wxpay(ret, orderid) {
  console.log('调起支付wxpay', ret);
  let res = ret;
  let status = false;
  uni.requestPayment({
    timeStamp: res.timeStamp,
    nonceStr: res.nonceStr,
    package: res.package,
    signType: res.signType,
    paySign: res.paySign,
    appId: res.appId,
    success: function (res) {
      console.log('success:' + JSON.stringify(res), res);
      uni.showToast({
        title: '支付成功!'
      });
    },
    fail: function (err) {
      console.log('fail:' + JSON.stringify(err));
    }
  });
}

封装的异步请求处理函数代码封装，创建文件request.js

request('接口名称', {key:value}, '请求方式(默认为GET)').then(res=>{console.log(res)})
import { getToken, removeToken } from './auth';
let baseUrl = '';
async function request(method,params,type,callBack){
 // 创建一个名为request请求的方法函数
 if (!type) {
    type = 'GET';
 }
  let header = {
    //设置请求头信息
    'Authorization': getToken(),
    'X-Requested-With': 'XMLHttpRequest',
    "Accept": "application/json",
    "Content-Type": "application/json; charset=UTF-8"
  };
  let http = {
    url: baseUrl + mehtod,
    data: params,
    method: type,
    header: header
  };
 let promise = new Promise((resolve, reject) => {
    uni.request(http).then(res => {
      let newdata = res[1].data; // if (newdata.code == 403) {
      if (newdata == -1) {
        uni.showToast({
          title: res[1].data.msg,
          icon: 'none'
        });
      }
      resolve(res[1].data);
    }).catch(err => {
      reject(err);
      console.log(err);
    });
  });
  return promise;
}
export default {
  request
};

创建util.js文件：（时间工具）

const formatTime = date => {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':');
};

const formatNumber = n => {
  n = n.toString();
  return n[1] ? n : '0' + n;
};

module.exports = {
  formatTime: formatTime
};

store-index.js

创建store-index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
 state: {
  hasLogin: false,
  userInfo: {},
 },
 mutations: {
  login(state, provider) {

   state.hasLogin = true;
   state.userInfo = provider;
   uni.setStorage({//缓存用户登陆状态
       key: 'userInfo',  
       data: provider  
   }) 
   console.log(state.userInfo);
  },
  logout(state) {
   state.hasLogin = false;
   state.userInfo = {};
   uni.removeStorage({  
                key: 'userInfo'  
            })
  }
 },
 actions: {
 
 }
})

export default store

App.vue

vuex管理登陆状态


main.js

import Vue from 'vue'
import store from './store'
import App from './App'

const msg = (title, duration=1500, mask=false, icon='none')=>{
 //统一提示方便全局修改
 if(Boolean(title) === false){
  return;
 }
 uni.showToast({
  title,
  duration,
  mask,
  icon
 });
}

const json = type=>{
 //模拟异步请求数据
 return new Promise(resolve=>{
  setTimeout(()=>{
   resolve(Json[type]);
  }, 500)
 })
}

app.vue

vuex 管理登录状态


main.js

import Vue from 'vue'
import App from './App'

//引入vuex
import store from './store'
import * as filters from './filters' // global filters
const msg = (title, duration=1500, mask=false, icon='none')=>{
 //统一提示方便全局修改
 if(Boolean(title) === false){
  return;
 }
 uni.showToast({
  title,
  duration,
  mask,
  icon
 });
}

//把vuex定义成为全局组件
Vue.prototype.$store = store
Vue.prototype.$api = {msg};

Vue.config.productionTip = false

Object.keys(filters).forEach(key => {
 Vue.filter(key, filters[key])
})

App.mpType = 'app'

const app = new Vue({
    ...App,
 // 挂载
 store
})
app.$mount()

点餐系统

效果动画：

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false;
import store from './assets/js/store';

new Vue({
 el: '#app',
 router,
 store,
 components: {App},
 template: ''
})

App.vue



router/index.js

import Vue from 'vue'
import Router from 'vue-router';
import home from '@/components/home';
import detail from '@/components/detail';
import list from '@/components/list';
import pay from '@/components/pay';

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect:"/home"
    },
    {
      path: '/home',
      name: 'home',
      meta:{keepAlive:true}, //缓存首页数据
      component: home
    },
    {
      path: '/detail',
      name: 'detail',
      component: detail
    },
    {
      path: '/list',
      name: 'list',
      component: list
    },
    {
      path: '/pay',
      name: 'pay',
      component: pay
    }
  ]
})

components目录

components/detail.vue






components/home.vue







components/list.vue






    

components/pay.vue






js/store.js

import Vue from "vue";
import Vuex from "vuex";

//应用插件
Vue.use(Vuex);

//定义vuex状态
export default new Vuex.Store({
 state:{
  shopping_cart:[],  //购物车
  goods:{},
  keyword:"",
 },
 
 mutations:{
  update_shopping_cart(state,paylod){
//   console.log(paylod);
   this.state.shopping_cart=paylod;
  },
  
  update_goods(state,paylod){
   state.goods=paylod;
  },
  
  update_keyword(state,paylod){
   state.keyword=paylod;
  }
 }
})

js/parabola.js

// JavaScript Document
var parabola = function(config){
    var b = 0,
        INTERVAL = 15,
        timer = null,
        x1,y1,x2,y2,originx,originy,diffx,diffy,speedx;

    this.config = config || {};
    // 起点
    this.origin = $(this.config.origin)||null;
    // 终点
    this.target = $(this.config.target)||null;
    // 运动的元素
    this.element = $(this.config.element)||null;
    // 曲线弧度
    this.a = this.config.a || 0.001;
    // 运动时间(ms)
    this.time = this.config.time || 1000;

    this.init = function(){
        x1 = this.origin.offset().left;
        y1 = this.origin.offset().top;
        x2 = this.target.offset().left;
        y2 = this.target.offset().top;
        originx = x1;
        originy = y1;
        diffx = x2-x1;
        diffy = y2-y1;
        speedx = diffx/this.time;
        b = (diffy - this.a*diffx*diffx)/diffx;
        this.element.css({
            left: x1,
            top: y1
        })
        return this;
    }

    // 确定动画方式
    this.moveStyle = function(){
        var moveStyle = 'position',
            testDiv = document.createElement('div');
        if('placeholder' in testDiv){
            ['','ms','moz','webkit'].forEach(function(pre){
                var transform = pre + (pre ? 'T' : 't') + 'ransform';
                if(transform in testDiv.style){
                    moveStyle = transform;
                }
            })
        }
        return moveStyle;
    }

    this.move = function(){
        var start = new Date().getTime(),
        moveStyle = this.moveStyle(),
        _this = this;
        timer = setInterval(function(){
            if(new Date().getTime() - start > _this.time){
                clearInterval(timer);
                _this.element.css({
                    left: x2,
                    top: y2
                })
                typeof _this.config.callback === 'function' && _this.config.callback(_this.element);
                return;
            }
            var x = speedx * (new Date().getTime() - start);
            var y = _this.a*x*x + b*x;
            if(moveStyle === 'position'){
                _this.element.css({
                    left: x+originx,
                    top: y+originy
                })
            }else{
                if(window.requestAnimationFrame){
                    window.requestAnimationFrame(_this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)');
                }else{
                    _this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)';
                }
            }
        },INTERVAL)
        return this;
    }
    this.init();
}

//引入依赖jquery
import $ from "jquery";

//输出api
export default{
 parabola
}

小程序

时间util.js

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

权限管理auth.js

// 获取指定权限

function getAuth(param) {
    wx.getSetting({
        success(res) {
            if (res.authSetting[param.auth] == undefined || res.authSetting[param.auth] == true) {
                param.success();
            } else {
                // 没有权限就提示去打开
                wx.showModal({
                    title: '提示',
                    content: '需要手动打开' + param.text + '的权限',
                    confirmText: '去打开',
                    cancelText: '放弃',
                    success(res) {
                        if (res.confirm) {
                            wx.openSetting({
                                success(res) {
                                    if (res.authSetting[param.auth] == true) {
                                        param.success();
                                    } else {
                                        param.fail();
                                    }
                                }
                            })
                        } else if (res.cancel) {
                            param.fail();
                        }
                    }
                })
            }
        },
        fail() {
            param.fail();
        },
    })
}
module.exports = getAuth;

推荐篇

阅读更多我自己写的文章内容：

  1. 前端面试必备ES6全方位总结
  2. 考前复习必备MySQL数据库（关系型数据库管理系统）
  3. 长篇总结之JavaScript，巩固前端基础
  4. 学习总结之HTML5剑指前端（建议收藏，图文并茂）
  5. 前端必学必会-多媒体-本地存储-浏览器与服务器的交互-通信功能
  6. 【建议?】记录一次BAT一线互联网公司前端JavaScript面试
  7. Web页面制作基础
  8. 【思维导图】前端开发-巩固你的JavaScript知识体系
  9. 【图文并茂，点赞收藏哦！】重学巩固你的Vuejs知识体系
  10. 【高能笔记】如何获得令人心动的前端offer | 掘金技术征文
  11. 11期前端冲刺必备指南-执行上下文/作用域链/闭包/一等公民
  12. 12期前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题
  13. 13期前端冲刺必备指南-this/call/apply/bind（万字长文）
  14. 14期-连肝7个晚上，总结了计算机网络的知识点！（共66条）
  15. 熬夜总结了 “HTML5画布” 的知识点（共10条）
  16. 16期-熬夜7天，我总结了JavaScript与ES的25个重要知识点！
  17. 17期-什么是MySQL数据库？看这一篇干货文章就够了！
  18. 18期-后端逆袭，一份不可多得的PHP学习指南
  19. 19期-当你在百度搜索关键字的时候，哪个网站会排在最前面？今天给大家科普一下“网站SEO”

点关注，不迷路

好了各位，以上就是这篇文章的全部内容，能看到这里的人都是人才。我后面会不断更新技术相关的文章，如果觉得文章对你有用，欢迎给个“赞”，也欢迎分享，感谢大家 ！！

《Vue.js入门与商城开发实战》：《Vue.js入门与商城开发实战》主要面向Vue.js的初级入门者，涵盖详细的理论知识、布局分析和逻辑分析，还有丰富的实战案例、详细的代码解说，具有很强的实用性。


全书主要内容分三部分：基础知识、技能提升、商城开发案例。

基础知识部分包括Vue.js入门、数据绑定、表单和双向数据绑定、条件和循环指令、样式绑定、事件处理器、监听和计算属性。

技能提升部分包括Vue.js的组件，自定义指令和响应接口，路由、动画和过渡，Vue.js中的插件Axios等。


商城开发案例部分包括一个商城项目的大部分功能，如首页开发、用户管理、实现产品和新闻页面、购物和订单处理等。 


送！！！

温馨提示：

    请在开奖前添加我的微信，否则无法领取奖品～

一切解释权归达达前端所有，获奖者必须添加微信：xiaoda0423 


留言心得，「点赞数高者（留言最走心）【在看】【抽奖码】三本」，「送」！


开奖截止时间

「2020-10-10 21:00:00」


扫码关注公众号，订阅更多精彩内容。


你点的每个赞，我都认真当成了喜欢
浏览 19
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
【深度学习】人人都能看懂的LSTM
熟悉深度学习的朋友知道，LSTM是一种RNN模型，可以方便地处理时间序列数据，在NLP等领域有广泛应用。在看了台大李宏毅教授的深度学习视频后，特别是介绍的第一部分RNN以及LSTM，整个人醍醐灌顶。本文就是对视频的记录加上了一些个人的思考。0. 从RNN说起循环神经网络（Recurrent Neur
机器学习初学者
0
科普：深度学习训练，不同预算GPU选购指南
以下文章来源于微信公众号：DeepHub IMBA作者：Mike Clayton本文仅用于学术分享，如有侵权，请联系后台作删文处理导读购买显卡第一个要考虑的问题是什么？当然是预算。本文提供了不同预算的显卡选购指南，希望能对各位读者有所帮助。在进行机器学习项目时，特别是在处理深度学习和神经网络时，最好
机器学习初学者
0
APP 安全测试项总结
一、安装包测试　　1.1、关于反编译　　目的是为了保护公司的知识产权和安全方面的考虑等，一些程序开发人员会在源码中硬编码一些敏感信息，如密码。而且若程序内部一些设计欠佳的逻辑，也可能隐含漏洞，一旦源码泄漏，安全隐患巨大。　　为了避免这些问题，除了代码审核外，通常开发的做法是对代码进行混淆，混淆后源代
测试开发技术
0
大量 Java 开源项目停更...
点击关注公众号，Java 干货及时推送↓推荐阅读：投了 100 多份简历后…出品 | OSC开源社区（ID：oschina2013)Sonatype 发布了最新的一份《软件供应链状况》报告，深入探讨了如何在充满选择的世界中定义更好的软件，并探讨人工智能 (AI) 对软件开发的深远
Java技术栈
0
学习开放日：开放复杂科学、AI+X 海量学习资源！
 Datawhale干货 学习开放日：4月27-28日1. 什么是学习开放日？以AI为代表的技术突飞猛进，人类知识森林快速扩张，仅凭一人之力不仅难以覆盖，更是难以串联知识线索。唯有像蚂蚁探索最优路径一样，我们才能在信息爆炸的知识森林中探索出更好的方向！因此，今年集智斑图联合国内最
Datawhale
1
只写后台管理的前端要怎么提升自己
大厂技术  高级前端  Node进阶点击上方 程序员成长指北，关注公众号回复1，加入高级Node交流群本人写了五年的后台管理。每次面试前就会头疼，因为写的页面除了表单就是表格。抱怨过苦恼过也后悔过（虽然我现在已经心安理得的摆烂），但是站在现在的时间点
程序员成长指北
1
三年前端还不会配置Nginx，被老板打了，今天一口气学完
大厂技术  高级前端  Node进阶点击上方 程序员成长指北，关注公众号回复1，加入高级Node交流群引言先来看看为何需要做请求负载。   早期的业务都是基于单体节点部署，由于前期访问流量不大，因此单体结构也可满足需求，但随着业务
程序员成长指北
4
【深度学习】图解自注意力机制(Self-Attention)
一、注意力机制和自注意力机制的区别Attention机制与Self-Attention机制的区别传统的Attention机制发生在Target的元素和Source中的所有元素之间。简单讲就是说Attention机制中的权重的计算需要Target来参与。即在Encoder-Decoder 模型中，At
机器学习初学者
0
微服务与领域驱动设计，架构实践总结
来源：知了一笑👉 欢迎加入小哈的星球 ，你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 /  赠书福利全栈前后端分离博客项目 2.0 版本完结啦， 演示链接：http://116.62.199.48/ ，新
小哈学Java
0
面试了一个字节出来的前端女生，她太太太厉害了
最近有个老同学进了某大厂—— 高级前端工程师，拿了45K*16薪！马上找他要来了几套高质量内部资料。既是高频真题，也是一套前端进阶学习宝典。几乎满足各级前端工程师的需求，内容涵盖了Html、Css、Javascript、vue、React、小程序、算法等等。实战代码清晰，解析也十分全面。足足有15套
java团长
0
点赞
评论
收藏
分享

手机扫一扫分享

举报