前端实战项目
前端小实践
王噶一啊一
新手新学,仅来记录学习过程
展开
-
2021-10-03aa
原创 2021-10-03 22:43:17 · 156 阅读 · 0 评论 -
前端导航站点(PC端)
本篇LIST1.项目预览地址: 项目预览地址2.项目完成效果:3.HTML布局拆分1. tip提示部分2. title标题部分3.搜索栏部分找的是codepen上现成的搜索框样式,包含搜索框展开收缩的特效。4.键盘录入部分找的是codepen上的现成的3d键盘样式,当点击实际键盘上对应的按键时,品目上的键盘会按下。5.整体页面背景部分找的是google导航的也页面背景。6.添加网站的弹出框部分找的是codepen上现成的弹出框样式,少加修改。4. CSS结构拆分主要是现成的样原创 2020-10-03 10:23:14 · 1348 阅读 · 0 评论 -
Sonni站点(移动端)
本篇list1.项目预览2.项目介绍3.项目开发--3.1移动端样式初始化--2.2 解决三秒点击延迟事件--2.3 完成静态页面布局--2.4利用vue实现数据响应式--2.5 实现删除功能--2.6 添加背景切换功能(图片闪动,键盘呼出问题)项目预览:https://jackson01.gitee.io/mobile_site1. 项目介绍Sonni站点是一个H5,移动端的站点,利用了VUE,js,html,css技术点。集成了网站搜索和网址保存的功能。方便用户保存经常访问的网原创 2020-09-01 11:01:58 · 222 阅读 · 0 评论 -
森尼简易画板
本篇LIST:项目介绍项目实现--静态布局--交互逻辑实现项目预览地址:http://jackson01.gitee.io/canvashua/项目介绍:在学习HTML5 canvas时制作的一个画板,支持移动端和桌面端,可以图片形式保存绘画内容。功能可选择笔的粗细可选择笔的颜色添加橡皮擦功能添加清空功能添加可下载内容项目实现:1.静态布局2.逻辑实现2.1 根据设备自动设置画布的大小我们定义一个自动设置画布大小函数利用document.documentElem原创 2020-09-01 11:01:20 · 138 阅读 · 0 评论 -
将node服务部署到云服务器上
1.什么是云服务器?云服务器就是 一台远程的电脑主机, 一般是linux 或者 mac 系统。2.部署流程首先购买一台云服务器。下载宝塔linux 面板来进行可视化 操作 这个云电脑。下载这台云电脑需要的软件,环境等。PM2来进行 node 的管理,使 node 可以在后台运行,不用一直在终端打开。把本地需要 运行在云服务器上的node项目, 前端项目 , 上传到云服务器上,好让我们在可视化操作中找到它。开启node服务然后 用 pm2 来管理一下这个node 项目然后在宝塔面板的安全中原创 2020-07-15 08:43:11 · 307 阅读 · 0 评论 -
VUE造轮子ui框架(上)
1.需求分析用例图,状态分析2.UI设计我们用SKetch进行ui的设计。可以利用symbol来绑定关联等详细操作就不赘述了,设计效果如下图3.项目初始化1.先在github上建立gulu仓库,本地电脑创建项目,关联到远程仓库2.创建README.md 和 LICENSE许可证(许可证可在github上进行创建,具体创建的类型可以看阮一峰老师的经典图)3.npm init 来简化项目的传输等,记载项目依赖,此时可以进行提交但node_modules依赖包过大,可以创建.gitignore文原创 2020-07-15 08:42:47 · 779 阅读 · 0 评论 -
React项目
百万答题项目1.项目结构搭建UI框架:Ant蚂蚁框架(专门为移动端开发的)网址js框架: React 。 利用create-react-app 来搭建项目,项目结构需要自己来拆分。2.项目具体实现1.Ant蚂蚁的配置;安装使用:npm install ants-mobile --save全部导入:import { Button } from 'antd-mobile';import 'antd-mobile/dist/antd-mobile.css'; 按需导入:安装插原创 2020-07-15 08:40:35 · 144 阅读 · 0 评论 -
VUE实战--网易云音乐
VUE实战–网易云音乐知识点:音乐的暂停播放。歌词的动态匹配。动态组件:根据is 属性 后面的组件名匹配<component :is="组件的名字"></component>背景模糊:可以利用伪类选择器, 来给背景来一层, rgba(0,0,0,0.5)模糊audio标签:audio 没有controls 属性 不在页面中显示通过下面的两个方法可以播放&暂停 音乐[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Hm原创 2020-07-15 08:38:36 · 1986 阅读 · 0 评论 -
画一只会动的皮卡丘(下)
!精品网站推荐: 一个喜欢开发的小玩意的网站: https://codepen.io/本篇清单List1. 页面布局2. 动态生成代码与皮卡丘style3. 3.实现速度的控制上篇中我们已经实现了静态的皮卡丘,我们需要让他动起来。1.页面的布局这里我们把屏幕分为上下两块。下面为预览皮卡丘的区域,上面为代码动态生成的区域<div class="code-wrapper"><pre id="code"></pre></div> <原创 2020-07-15 08:37:21 · 544 阅读 · 0 评论 -
画一只会动的皮卡丘(上)
实现的皮卡丘样式如下图:本篇内容List:tip1--全局样式初始化,配置tip2--实现鼻子tip3--实现眼睛tip4--实现脸颊tip5--嘴巴实现1.先进行页面整体的样式配置这里我们要在手机端展示,所以我们尽量整个图形的宽度要小于手机屏幕的最小宽度,代码如下: * { margin: 0; padding: 0; box-sizing: border-box; } *::before { margin: 0;原创 2020-07-15 08:37:04 · 5284 阅读 · 2 评论 -
Vue 实战项目: 硅谷外卖(1)
第 1 章: 准备1.1. 项目描述1) 此项目为外卖 WebApp(SPA)2) 包括商家, 商品, 购物车, 用户等多个子模块 3) 使用 Vue 全家桶+ES6+Webpack 等前端最新最热的技术 4) 采用模块化、组件化、工程化的模式开发1.2. 项目功能界面1.3. 技术选型1.4. 前端路由1.5. API 接口1.6. 项目 vue 组件1....原创 2020-04-03 22:52:00 · 771 阅读 · 0 评论 -
微信小程序(黑马优购)完成!!{10天}
微信小程序(黑马优购)完成!!{10天}项目技术点:wxml, json, wxss, js, mina框架附上视频链接添加链接描述原创 2020-04-01 20:26:41 · 2337 阅读 · 1 评论 -
VUE_shop(第十天)项目的打包优化
项目的打包优化1.添加页面的加载效果1.首先安装运行依赖nprocess,在main.js文件中的axios拦截器拦截请求的时候调用Npeocees.start. 在拦截响应的时候调用nprocess.end()来隐藏加载条2.项目报错项的优化:1.开发环境下的报错优化,手动去除报错的地方,重新编译运行,知道项目无报错。2.生产环境下的报错:报错一般是console的多余导致的错误。首...原创 2020-03-21 10:01:39 · 170 阅读 · 0 评论 -
vue-shop项目第二天(用于个人学习的记录)
vue-shop项目第二天1.实现路由导航守卫功能。router.beforeEach((to, from, next) => { // to 将要访问的路径 from 代表从哪个路径跳转而来 next 是一个函数,//表示放行 // next() 放行 next('/login') 强制跳转 if (to.path === '/login') re...原创 2020-03-12 21:07:43 · 160 阅读 · 0 评论 -
vue-shop项目第一天(用于记录 个人学习)
vue-shop 第一天一.项目初始化1.安装vuecli脚手架(依赖于webpack)[前端自动构建工具]。2.安装插件(element-ui)[第三方插件库], 安装依赖(axios)[调用后端接口的模块]3.需要将项目托管到码云[一个代码管理仓库],码云ssh的简单配置。4.配置一下git(第一次使用),先进行本地提交,再根据提交 指令把仓库上传到码云仓库中。(第一次使用码云需要填...原创 2020-03-11 18:58:36 · 190 阅读 · 0 评论