---
title: "前端开发"
date: 2019-12-26T16:07:49+08:00
draft: false
---

# 序

## 前端框架类型
想要让排版好看，好用的有bootstrap等主要用来整排版，组建的。其次，如果想要优化js，简化数据修改的方式，可以用vue，react等框架，这些都能极大的简化js的写法。

我个人目前主要使用bootstrap和vue框架，一个用来搞数据，一个用来美化ui。当然jquery也是我比较喜欢用的。
技巧：
## 使用方式

### 善用框架
关于vue，两种思路，一种用vue脚手架，这个就对于ui美化没那么自由舒服了。另外一个就是不用vue脚手架，但是还是要用vue。因为vue能够优化数据绑定。

如果要有一个万能的办法去将不同的框架东西套用到一起的话，有办法。使用iframe，传参是可以的。

如果要快速开发，对前端要求也没太高的话，个人感觉vue脚手架很可以，如果对ui要求很高的话，（而且是不想自己从头开始设计的）那个就建议直接使用html。同时vue等操作数据的也可以后期加

### 善用浏览器

#### 控制台
控制台的输出是很重要的，我们可以直接看到报错内容，也可以作为人肉调试的输出窗口。

#### network加载
在这个窗口，我们可以看到加载这个网站总计使用的元素，加载的次数，以及加载的先后顺序以及时间。

#### element
这是一个对于前端css调试十分重要的页面

元素的大小等属性

元素的css之类的属性
这里最大的有点就是直接能够看到某个标签的属性，以及能够直接对***属性进行修改***。

同时也可以直接修改html。

#### 其他的也比较重要，不多赘述

这些工具不仅在开发时有用，在入侵时同样有用。

### 套html模板
目前通过实践，最好的套模板办法是通过nodejs做为中间层，然后直接将整个html静态网页的文件夹导入。
'主要思路是，使用nodeJS作为中间层，负责控制路由，以及优化ajxa，html上的数据绑定可以通过引入前端js框架的js文件，动态数据绑定'

#### 关于套模板中的css等样式重复问题
在套html模板的时侯，我们可能会碰到一种问题，就是我们的模板往往可能只有一个或者少数几个符合我们的需求。
这中时侯，我们可能就会同时套几个模板，那么可能会有一个问题，静态资源重复问题，有些问题是可以解决的，也比较好解决（比如更改名再引用），但是有时候为了求快怎么办呢，有一个必定成功的办法，直接再开一个前端node，新建一个端口。另一个半就就是，同时引入，但是更改css文件的名称，虽然还是不可避免的可能会出问题，但是对于小页面而言，已经可以调节了。

### vue和jquery配合使用

一定要注意，this，jquery里的ajax里的this会覆盖调上层的vue的this，导致访问不到值。

<script type="text/javascript">
new Vue ({
    el : '#example',
    data : {data : ""},
    created : function(){
        var _self = this;
        $.ajax({
            url : 'listTemController/queryTemplate',
            type : 'post',
            async : false,
            data : {list : '3'},
            datatype: "json",
            success : function (data) {
                console.log(data);
                _self.data = data.list;
            }
        })
    }
})
 </script>

### 关于ajax异步请求导致的数据不一致问题，
异步有点类似我们的并发，可以选择修改ajax异步为同步。
具体只需要修改一个属性

 $.ajax({
                url:'http://127.0.0.1:3001',
                type:'POST',
                data:data1,
                dataType: 'json',
                async: false,              这个属性就是异步还是同步属性

                success:function(res){
                    //console.log(res);
                    results.push(res);

                },
                error:function (res) {
                    console.log(res.responseText);
                }

### 关于用户认证鉴权问题
如要要使用node JS作为中间层做用户代理的话，那么，可以使用jwt技术。jwt技术比传统的session技术要好，可以有效的减轻服务器的压力，轻易架构起多台服务器。
具体做法就是，在这之后的每次请求中，跨域的就自动带上cookie或者其他相关请求，同源的就不用。
在同域的情况下，我们发送请求会默认携带当前域下的cookie，但是在跨域的情况下，默认是不会携带请求域下的cookie 的，比如http://domain-a.com 站点发送一个 http://api.domain-b.com/get 的请求，默认是不会携带 api.domain-b.com 域下的 cookie.

要解决这个问题，我们就要让这个跨域请求可以携带上cookie，做法很简单：
- 前端处理
在前端我是使用axios发起网络请求
axios.defaults.withCredentials = true
- 在后端，我们也要否允许浏览器携带cookie访问进行设置，也就是说我们要将响应头的credentials设置为true
credentials: true, //是否允许发送Cookie

### 关于ssr服务器端渲染
服务器端渲染也就是说在服务器将html渲染后然后返回给前端。
这样相对绝对的纯ajax在客户端获取数据的好处是，减小客户端压力，以及可以进行爬虫了，增强SEO。
有利于首屏加载
使用nodeJS进行服务器端渲染，可行。具体步骤可以自行搜索。

我目前使用nodeJS加上vue进行SSR。注意点
对于vue，
- 服务器端渲染过程中，只会调用beforeCreate和created两个钩子函数，其它的只会在客户端执行。
- 由于服务器可客户端是两种不同的执行平台环境，那么一些特定平台的API就不能用了，比如window和document，在node.js（比如created钩子函数）中执行就会报错。并且，我们使用的第三方API中，需要确保能在node和浏览器都能正常运行，比如axios，它向服务器和客户端都暴露相同的 API（浏览器的源生XHR就不行）。