- 博客(27)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 初识 Nx
Nx 是一套功能强大、可扩展的开发工具，可帮助我们开发、测试、构建和扩展 Angular 应用程序，并完全集成支持 Jest、Cypress、ESLint、NgRx 等现代库。一、安装 CLI1.使用npm：npm install -g nx2.使用yarn：yarn global add nx二、创建应用npx create-nx-workspace@latest回车后将进行一波安装过程，然后自定义配置。安装完成得到如下目录结构：Nx 使代码轻松拆分为单独的项目，项目有两种类
2021-01-16 18:22:45
4166
3
原创 git修改已提交的信息
修改已提交的注释主要命令：git rebase -i master~1 #最后一次git rebase -i master~5 #最后五次git rebase -i HEAD~3 #当前版本的倒数第三次状态git rebase -i commit id #指定的提交位置着手操作一遍：1.首先使用 git log 查看提交记录2.假如我现在要修改 f332a80d 开头的提交注释信息，使用 git rebase -i + 上一次的commit id，也就是 ecb5b584：git
2021-01-15 16:19:33
2136
原创 Docker打包镜像及修改配置
最近在学习Docker和实际操作中遇到了不少问题，写篇博客记录一下。安装我安装的是windows版的docker desktop，在windows上用docker挺麻烦的，要配置一些东西，在windows上安装docker desktop。安装完成后，以管理员身份运行一般都能跑起来，如果遇到 Docker Access Denied 报错打不开的情况，需要把计算机当前用户加入到docker-users用户组里面。打开命令行工具输入下面命令检验docker是否安装成功：甚至可以跑个hello-w
2021-01-07 18:06:57
2803
原创 在Angular项目使用socket.io实现通信
step1、为项目安装依赖在终端输入以下命令为我们的angular项目安装express、socket.io、socket.io-clientnpm install express socket.io socket.io-client本人安装的各版本信息如下："express": "^4.17.1","socket.io": "^3.0.4","socket.io-client": "^3.0.4",step2、编写后台服务可以在项目中新建一个server文件夹，用来存放我们的后台服务，
2021-01-04 14:37:06
2426
6
原创 Angular指令 *ngIf else 使用
Angular 中常用的指令有用来遍历的 *ngFor 、控制元素显示隐藏的 *ngIf，今天学习一下 *ngIf 这个常用的指令。在我们的实际业务中可能遇到这样的需求，一个 table 表格，最后一列有修改、删除或者其他操作，当我们点击修改按钮的时候，当前这一行的内容都出现在一个 input 输入框里面，然后我们可以直接进行修改，这个时候我们就可以使用 *ngIf 和 else 来实现。效果图如下：部分实现代码：<tr *ngFor="let item of gridList">
2020-12-13 23:54:07
7104
14
原创 Angular学习之核心文件分析
开始学习Angular啦首先分析一下Angualr项目里的一些核心文件，了解他们是做什么的1.根模块 app.module.ts这个文件是 Angular 的根模块，告诉 Angular 如何组装应用// BrowserModule 浏览器解析的模块import { BrowserModule } from '@angular/platform-browser';// Angular 核心模块import { NgModule } from '@angular/core';// 根组件im
2020-12-13 00:01:53
1102
9
原创 vue调用百度定位接口实现地理定位
其实HTML5中有个 Geolocation API 可以获得用户的地理位置，不过它只能返回用户位置的经度和纬度。下面是一个简单示例：var x=document.getElementById("demo");function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else {.
2020-10-25 17:36:59
2907
6
原创 vue+node+mysql实现用户注册上传头像
首先祝大家1024程序员节节日快乐！写篇博客记录一下这个特别的节日！相信有很多小伙伴写用户管理系统的项目都想实现这样一个功能，就是用户注册可以上传自己的头像，然后把用户信息和头像一起写入数据库，当用户登录成功后可以显示当前用户的头像。我能想到的第一个方法是先把用户选择的图片通过base64转码，然后把用户信息和转码后的一大串字符串一起写入数据库，用户登录成功后再取出来并交给img标签解析。这个方法的缺点也很明显，性能肯定是大打折扣的，而且转码后的文件会占用很多存储空间，无法存储大图片。第二个办法就是
2020-10-24 18:23:08
2455
2
原创 连接服务器MySQL数据库常见报错和解决
今天准备和小伙伴们一起写个项目，其中有一个需求需要使用云数据库，正好我之前在服务器上装了mysql数据库，于是我就尝试使用navicat测试一下，走了很多弯路T_T，所以有了这篇博客，给大伙儿避雷！正文开始～1、环境服务器：阿里云centOS 7MySQL版本：5.7Navicat版本：152、连接首先确保你的MySQL服务已开启，输入如下命令查看：service mysql status如果提示OK就说明已启动，否则输入：service mysql start以开启MySQL服.
2020-10-17 16:49:21
2530
原创 vue2使用axios请求报错Cannot set property ‘axios‘ of undefined
今天使用axios请求时突然报了个错：之前用的好好的，怎么今天就突然报这样的错了呢！细心的同学应该发现了，vue-axios已经升级到3.0版本了，还记得上个月新发布的vue3吗，随着vue3的更新，vue-axios也升级了，大家可以看看官网的介绍 vue-axios最新的vue-axios3仅支持最新的vue3，所以解决方法就是安装旧版本的vue-axios：1.卸载vue-axiosnpm remove vue-axios2.重新安装旧版本的vue-axiosnpm install
2020-10-15 20:31:44
2017
2
原创 node连接mysql数据库遇到的问题和解决
今天安装了新版的MySQL(8.0.21)，用node框架连接数据库的时候报了个错：Client does not support authentication protocol requested by server; consider upgrading MySQL client原因在于MySQL8.0换了加密插件,而数据库管理客户端还是原来旧版本的加密方式，主要在于安装MySQL8.0过程中的Authentication Method这一配置过程，有了不同的加密方式，所以如果选择强加密（默认应该
2020-10-14 20:49:48
2558
8
原创 vue-cli4+element-ui搭建知乎项目及总结
花几天时间和小伙伴做了个仿知乎官网的项目，下面是我整理的项目搭建流程及部署和总结，如有不足之处欢迎大家批评指正！先奉上项目地址和源码！源码地址 ， 项目地址一、目录结构本项目使用vue-cli4脚手架创建，目录结构也比之前的2版本要简洁许多，下面是本项目的目录结构。1.public文件夹下的data和found放的是json数据和图片资源，本来想直接调用知乎的数据接口，奈何没有权限，于是只好将json数据保存在本地了～2.assets放的也是图片资源3.components放的是一些组件，.
2020-09-28 17:46:27
914
原创 CSS小技巧之替换图片(content)
一想到替换图片，我们大部分人可能都会想到用background-image或用两个img元素控制显示隐藏来实现，其实还可以利用css的content属性来替换img中的内容来实现。Part 11.首先我们使用content属性来生成一张图片，先写两个img标签 <img src="img/qaq.jpg"> <img>2.第一个img用src引入一张图片，第二个img是个空标签，注意这里不要写src属性，就是一个单纯的< img >！然后写cs.
2020-09-20 20:41:08
14439
2
原创 Chrome浏览器安装Vue Devtools插件（附带编译好的工具包）
我们在使用vue开发项目的时候，如果想要更好的审查和调试 vue 应用，可以使用官方推荐的Vue Devtools。但是官方的方法比较麻烦，要使用npm编译，搞不好还会报好多莫名其妙的错误。下面给大家提供一个简便的方法，不会再浪费大家宝贵的时间啦！1.获取Vue Devtools插件我已经将编译好的插件上传到博客里啦，可以找一下然后下载。解压后得到一个 vender 文件夹，打开后目录结构如下打开 manifest.json文件，找到 "persistent”，将它的值改成true2..
2020-09-09 23:47:17
3444
3
原创 jQuery写一个简易的qq聊天框
先放一张效果图！1.首先我们把基本框架搭出来，还要准备三张图片用来当作头像，下面是html的内容<body><section id="chat"> <div class="chatBody"></div> <div> <img src="images/icon.jpg"> </div> <textarea class="chatText"></text
2020-08-26 20:34:43
3317
原创 简单的js判断设备是pc端还是移动端，来加载相应的页面
最近在做一个前端项目，做了一个pc端的和一个移动端的，就想着可以把这两个页面关联起来，在pc端打开的时候展示pc端的页面，移动端打开展示移动端的页面，进而提升用户体验哈哈然后自己在网上找了很多中方法，大都有一个问题，就是打开网页的时候加载很慢，要等个好几秒才能加载出页面，用户体验极差，找了很久终于找到一个比较好的方法，页面加载也很快。话不多说，上代码！pc的端html页面头部加入下面的代码<script> var sUserAgent = navigator.us.
2020-08-07 20:41:26
2070
3
原创 Nginx部署前端项目至远程服务器
第一次部署自己写的项目哈哈，其中也踩了很多坑，都是自己慢慢摸索出来的，还是很开心的，写个博客记录以下！使用工具和环境：1.阿里云服务器2.xshell和xftp3.宝塔面板（傻瓜式操作，非常简单）4.Nginx下面开始正式教程了1.在宝塔面板的软件商店找到Nginx并安装没有接触过宝塔面板的小伙伴可以尝试一下，宝塔面板安装接下来等他自己慢慢安装好就可以了2.点击文件，在/root目录下新建一个app文件夹，用来存放我们的html等静态文件3.用xshell连接服务器后，打
2020-07-18 21:53:55
1325
原创 MySQL使用MD5加密数据
我们在使用数据库的时候，为了安全可能需要对一些数据（比如账号密码）进行加密，写一条博客记录一下嘿嘿我使用的工具是SQLyog，话不多说，教程开始：1.在我们的数据库中新建一张表，SQL代码如下CREATE TABLE `testmd5`( `id` INT(4) NOT NULL, `name` VARCHAR(20) NOT NULL, `pwd` VARCHAR(50) NOT NULL, PRIMARY KEY (`id`))ENGINE=INNODB DE.
2020-07-07 21:02:40
8428
3
原创 使用 Generator 处理异步调用
Generator 是 ES6 的新规范，它属于函数的一部分，常用于处理异步代码，本篇文章将向大家简单介绍一下 Generator ，如有错误，欢迎大家批评指正哈！1.一个简单的Generator这是一个简单的 Generator 例子：function* gen() { return 'first generator';}let generatorResult = gen();使用 * 表示这是一个Generator函数我们在控制台打印一下 generatorResult ，结果是
2020-06-04 23:20:49
501
原创 MayBe函子竟有如此妙用？快get起来！
今天看到一个好玩的东西，它就是MayBe函子，它能使我们能够以函数式的方式处理代码中的错误，写条博客记录一下顺便分享给大家哈！MayBe函数定义const MayBe = function (val) { this.value = val;}MayBe.of = function (val) { return new MayBe(val);}MayBe是一个能持有数据的函子，它将实现一个map函数MayBe.prototype.isNothing = function()
2020-06-03 23:47:21
408
原创 vue-admin-template使用路由和mockjs进行二次开发
最近在研究vue-admin-template模板，准备对他做二次开发，其中必须要经历的步骤就是创建路由和请求mock假数据了，下面是我写的一个商品页面，所有的数据都是利用Mockjs随机生成的，现在简单说一下我的编写步骤和思路。如果对这个模板不熟悉的话建议先阅读一下官方文档1.首先我们在views下新建一个product文件夹，然后在里面新建一个index.vue，官方文档说了，侧边栏是动态生成的，所以我们只需要在路由表里添加一个路由2.进入router/index.js，添加一个路由，我把它当
2020-05-30 19:34:22
3534
5
原创 vue使用axios请求easy mock假数据
我们前端开发项目的时候有时需要用到一些数据，以便我们查看页面效果或者检查接口是否可用，本篇文章教大家如何使用axios去请求假数据！
2020-05-28 13:50:48
932
2
原创 使用 element-ui 隐藏组件 el-scrollbar 美化滚动条
嘻嘻，抽空出个教程，这个我也是看别人的文章学来的哈哈拿element-ui官网的这个container布局容器做例子吧，当我们展开所有条目的时候，右侧就会出现浏览器自带的滚动条，而且这个滚动条还会把左边的上下箭头挤过去…说白了就是会占间距，虽然还看得过去…但是给别人的感觉就很low然后我们再把鼠标移动到官网左侧的列表栏，就能看到element-ui自带的滚动条啦，很好看吧那么我们怎样才能用上这个滚动条呢，教程开始！element-ui是有这个组件的，<el-scrollbar>&l
2020-05-26 14:40:45
3795
原创 对vue响应式原理的理解
我们都知道，vue 最独特的特性之一，是非侵入性的响应式系统，数据模型仅仅是普通的 JavaScript 对象，而当我们修改它们时，视图会进行更新，其实就是让组件重新渲染。那么 vue 是怎样追踪到数据的变化并重新渲染组件的呢，看看官网的解释：当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.def
2020-05-25 11:32:54
496
原创 解决vue-cli 项目引入element ui 运行时浏览器报错Unknown custom element
解决vue-cli 项目引入element ui 运行时浏览器报错Unknown custom element上条动态的问题解决了，在main.js文件里加入下面的代码即可import Vue from 'vue';import App from './App';import router from './router';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue
2020-05-23 21:18:27
2998
原创 关于 idea 安装 Vue 插件后新建文件不显示 Vue Component 的问题及解决方法
关于 idea 安装 Vue 插件后新建文件不显示 Vue Component 的问题及解决方法1.点击 file 打开设置 settings，展开 Editor 找到 file and code templates2.找到 Vue single file component 并选中它，然后点击copy3.复制后底部出现了一个新的文件4.把 Name 改成 Vue Component，然后把代码里的 “COMPONENT_ ”删掉，最后点 ok 就完事了然后我们再新建一个文件的时候就可以看
2020-05-21 19:53:31
5488
31
Vue Devtools
2020-09-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人