前端--也就字符串的处理

在我看来前后端分离就是以下几个流程：

第一步：编写静态页面

第二步：向服务器发送AJAX请求

第三步：处理服务器返回的数据

所以说我们得掌握AJAX的知识（jQuery就封装了原生ajax,axios）

var xhr = new XMLHttpRequest();//创建 XMLHttpRequest 对象
xhr.open("get","DemoID",true);//规定请求的类型、URL 以及是否异步处理请求。
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//post需要设置HTTP 头
xhr.send();//将请求发送到服务器。
xhr.onreadystatechange = function () {//每当 readyState 改变时，就会触发 onreadystatechange 事件。
if(xhr.readyState == 4 && xhr.status == 200){
    var date = JSON.parse(xhr.responseText);//responseText	获得字符串形式的响应数据
    console.log(date)
    }
}

于是我们就得到了服务器传过来的数据

数据表

 

 这里我们就需要掌握JS的字符串，数组,JSON对象及遍历等相关知识将数据动态的响应到界面

字符串的一些操作方法

var str = "Hello world!";

//提取字符串的片断
var a = str.slice(1, 5);
console.log(a)//ello

//把一个字符串分割成字符串数组
var b = str.split(" ");
console.log(b)// ['Hello', 'world!']

//返回某个指定的字符串值在字符串中首次出现的位置
var c = str.indexOf('world');
console.log(c)// 6

//去除字符串两边的空白。
var str1 = '  这是用户输入的内容 '
var d = str1.trim();
console.log(d)//这是用户输入的内容 (传入服务器要过滤)

数组的一些操作方法

//数组转换为字符串 --> 字符串分割成字符串数组split(",")
var fruits = ["Banana", "Orange", "Apple", "Mango"];
//连接数组转化为字符串 默认：逗号
var e = fruits.join('连接');
console.log(e)//Banana连接Orange连接Apple连接Mango
//转化为字符串
var f = fruits.toString()
console.log(f)//Banana,Orange,Apple,Mango

//删除数组的最后一个元素并返回删除的元素。
// fruits.pop()//Mango
// console.log(fruits)//['Banana', 'Orange', 'Apple']

//删除数组的第一个元素并返回删除的元素。
// console.log(fruits.shift())//Banana
// console.log(fruits)//['Orange', 'Apple', 'Mango']

//向数组的末尾添加一个或多个元素，并返回新的长度。
// console.log(fruits.push("Kiwi")) //5
// console.log(fruits);//['Banana', 'Orange', 'Apple', 'Mango', 'Kiwi']

//向数组的开头添加一个或更多元素，并返回新的长度。
// console.log(fruits.unshift("Kiwi")) //5
// console.log(fruits);//['Kiwi', 'Banana', 'Orange', 'Apple', 'Mango']

//添加或删除数组中的元素(实现上面和下面的所有操作)
// console.log(fruits.splice(2,2))//['Apple', 'Mango']
// console.log(fruits)//['Banana', 'Orange']

// console.log(fruits.splice(2,0,'添加内容'));//[]
// console.log(fruits)//['Banana', 'Orange', '添加内容', 'Apple', 'Mango']

// 截取数组
console.log(fruits.slice(1,3))//['Orange', 'Apple']
console.log(fruits)//['Banana', 'Orange', 'Apple', 'Mango']

JSON对象两个方法

JSON.parse() //方法将数据转换为 JavaScript 对象。
JSON.stringify() //方法将 JavaScript 对象转换为字符串。

遍历数据

    let xiYou = [
        {id: 1, name: "唐僧", age: "30", sex: "人"},
        {id: 2, name: "孙悟空", age: "1000", sex: "猴子"},
        {id: 3, name: "猪八戒", age: "999", sex: "猪"},
        {id: 4, name: "沙悟净", age: "789", sex: "人"},
        {id: 5, name: "白龙马", age: "300", sex: "龙"},
    ]
    //普通循环
    for (var i = 0; i < xiYou.length; i++) {
        console.log(xiYou[i])
    }
    //for/in 语句循环遍历数组的属性
    for (var x in xiYou) {
        console.log(x)          //每次迭代返回一个键 (x)
        console.log(xiYou[x])  //键的值为 person[x]
    }
    // Array.forEach() 为每个数组元素调用一次函数（回调函数）。
    xiYou.forEach(function (value, index, array) {
        console.log('value:', value, 'index:', index, 'array:', array)
    })
    
    //For Of 循环遍历可迭代的数据结构，例如数组、字符串、映射、节点列表等
    for (var x of xiYou) {
        console.log(x)
    }

所以说这些基本功是前端工程师必须要掌握的，后端就是解析路由，然后向数据库进行增删改查等一系列操作，大家对vue-router有了解就明白是怎么回事了

下面是查询数据库的thinkphp写法，相信你看到了是多么的简洁吧，当然你学到了Java的框架也是如此

public function DemoID(){
    $list = new Demo();
    $res = $list->selectId();//调用下面 Model的方法
    if($res){
        return $res;
    }
}
----
<?php
namespace app\admin\model;
use think\Db;
use think\Model;
class Demo extends Model
{
    protected $pk='id';//设置主键
    protected $autoWriteTimestamp = 'datetime';

    //获取demo全部数据
    public function selectId(){
        $res = Demo::all([1,2,3,4,5]);
        return $res;
    }
}

第一次发帖，希望多多指正