前后端分离

json相关

JavaScript Object Notation，即 js的对象简谱，一种数据交换格式，采用独立于编程语言的文本格式存储和表示数据，因为目前前后端分离的存在，故json在数据传递上十分重要

在js中一切都是对象，任何js支持的类型都可以用json表示，json语法是js语法的子集

json的结构和形式，从简单到嵌套，举例如下：

{
    "key": "value",
    "key2": -123.456,
    "key3": {
        "name":"测试文字",
        "tel":"05318888"
    },
    "key4":[1,2,3,4],
    "key5":["a","b","c"],
    "key0":null
    ,
    "books": [
      {
        "title": "FBI心理学",
        "edition": 1,
        "serialNumber": "SN001",
        "author": "Tom"
      },
      {
        "title": "平凡的世界",
        "edition": 2,
        "serialNumber": "SN002",
        "author": "路遥"
      },
      {
        "title": "童年",
        "edition": 1,
        "serialNumber": "SN003",
        "author": "高尔基"
      }
    ]
  }

场景：在后台应用程序中将响应数据封装成JSON格式，传到前台页面之后，需要将JSON格式转换为JavaScript对象，然后在网页中使用该数据。

这是一个xml语言的代码，

  <request>
  <firstName>这里是名字</firstName>
  <lastName>这里是姓氏</lastName>
  <email>[email protected]</email>
  </request>

用json写如下：

 {
    "request": {
      "firstName": "这里是名字",
      "lastName": "这里是姓氏",
      "email": "[email protected]"
    }
  }

以二级学院为例，写一段能展示下设机构的json：

const university = {
    "name": "山东科技大学",
    "location": "青岛市黄岛区",
    "colleges": [
      {
        "name": "能源学院",
        "departments": ["计算机科学", "电子工程", "机械原理"]
      },
      {
        "name": "艺术学院",
        "departments": ["古典文学", "表演学", "社会科学"]
      },
      {
        "name": "经管学院",
        "departments": ["金融学", "市场管理", "管理学"]
      }
    ]
  };
  
  console.log(university);

基于Django + Vue.js的前后端分离项目

环境：python3.11、MySQL8.0.32.0、pycharm2023Pro、node

现使用下图所示导入名为“DjangoVue”模板，可见左侧该项目目录结构（其中除了frontend，其他都属后端）

使用navicat16Pro建一个新数据库，字符集及其排序如图

在安装mysqlclient库的条件下，先对setting.py进行配置（NAME和PASSWORD）以实现数据迁移

终端中运行命令

上述命令成功时显示如下，并执行 runserver 的命令：

会显示这个网址 http://127.0.0.1:8000/ :

这个网址在浏览器里：

注意，迁移命令含有两条，之前只执行了其一：

迁移成功后在navicat的表单里会更新如下

再次运行

如果发生8000端口被占用 则考虑重新编辑配置（新的8001）

配置好之后应该如下

将api后缀加在网址后面的页面，如下表示成功

运行前端：

在里面跑一下 npm run dev

在http://localhost:8080里便可以对书籍进行添加操作了，同时这些添加操作也会同步到navicat表单