最近没什么事就被老大抓壮丁去做了一个游戏后台管理系统,包括前端和后端。
前端采用Vue+Webpack+Vue-resource+element-ui后端采用Nodejs+express+mysql+redis
初生牛犊不怕虎,看了一点文档,俺上来就手撸Vue,悲催的发现半道出家没学过CSS、HTML上来就撸框架还是有点长吃力的,一些基本操作都很艰难。只好老老实实去看HTML和CSS。
HTML笔记
<html>
<body>
<head>
<title>
<hx>标题
<ul>没有前后顺序的信息列表
<ol>有前后顺序的信息列表
<span>设置文字单独样式
<q>短文本引用
<hr>水平横线
<address>地址
<code>一行代码
<pre>一段代码
<br>换行
<strong>强调
空格
<div>划分 属性: id
<table>表格 tbody一块 tr一行 th表头 summary摘要 caption标题
<a> 链接到另一个页面 target="_blank"新标签页打开 href 点击打开的网址 title悬停信息
<form> 表单 method 数据传送方式 ation数据被传送到的敌方
<textarea rows="行数“ cols="列数”>
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>单选/复选框
<select>下拉框 <select>
<option value="看书">看书</option> multiple = "multiple"多选
<input type = "submit“>提交按钮 type = reset 重置按钮
css三种方式 内联式 》嵌入式? 外部文件式
css .开头{}
.green{} 使用class ="green"来使用 类选择器
#green{}使用id="green"来使用 id选择器
区别:
1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,
.food>li{border:1px solid red;} 子选择器
.first span{color:red;} 包含(后代)选择器
区别:
子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
通用选择器 * {color:red;} 它的作用是匹配html中所有标签元素
伪类选择符 它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色 a:hover{color:red;}
分组选择符 html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:h1,span{color:red;}
继承 CSS的某些样式是具有继承性的 它允许样式不仅应用于某个特定html标签元素,而且应用于其后代 但注意有一些css样式是不具有继承性的。如border:1px solid red
权值:标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100
css布局
div h1 p 宽度都为100%
看下来感觉网页HTML和CSS的编程思想和Unity还是完全不一样的,Unity忽略他的Component系统,针对GameObject来说的话还是比较纯粹的面对对象的感觉的。而HTML和CSS给人一种解释型,面对过程的feel。一个单纯的Unityer还是不太适应。
初步的补了下基础,开始手撸框架,之所以采用Vue一是当下三大框架之一有很多现场的教程和轮子,二就是据听说比较简单,三是有个朋友也是Vue的我可以充分利用他,后来也基本没用上,哭。。。。
Vue的开发过程就没什么好说的,整体来说还是非常优秀的框架,基于它来开发前端页面还是非常快捷和方便,并且有很多的资料和开源组件,极大的增加了开发的效率,并且它的组件系统也为页面复用提供了非常好的解决方案,是我熟悉的面对对象的味道。但是我是用惯的MVC的他是基于MVVM的设计模式,用起来有点不太顺手,当然优点不可否认,少写了很多代码,但是总感觉灵活度不够。总的来说在前端开发方面没有碰到太大的问题,Vue还是非常优秀的框架。
说完前端说下后端,考察了php,java等语言,最后发现还是nodejs最简单,开发速度最快,而且我是采用前后端分离的模式,php的后端渲染模式对我毫无卵用,而且对我的学习造成的严重干扰,哼!,pass。java写起来太累,pass。nodejs+express快而且和vue也是nodejs的环境的,天生一对,就你了。
express的开发过程也没什么好说的(说了好多发现都是废话 尴尬),网上找一个模板参考下,注意下跨域访问的问题,接入mysql和redis库也是直接通过npm安装非常方便。学习下mysql的语句和redis的命令就可以撸起来了,灰常完美。
基本架子搭起来,剩下就是业务逻辑了,没什么好说的。前后大概两周搞定了这个模块还是非常高兴的。个人体会vue和express为开发者提供了非常便捷的服务,但是想要用好还是要在前后端领域深耕细作的,那就不是我的专业了,只要能跑就好了,哈哈哈哈哈 完结撒花。
tips:以上都是个人感受有什么不对的欢迎指正和拍砖