前后端分离

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>12345678@126.com</email>
  </request>

用json写如下:

 {
    "request": {
      "firstName": "这里是名字",
      "lastName": "这里是姓氏",
      "email": "12345678@126.com"
    }
  }

以二级学院为例,写一段能展示下设机构的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,其他都属后端)

image-20230716173408796

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

image-20230716181650931

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

image-20230716182502567

终端中运行命令

image-20230716183117908

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

python manage.py runserver

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

image-20230718121021171

这个网址在浏览器里:

image-20230718121121619

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

image-20230718121229990

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

image-20230718121918874

再次运行image-20230718122006151

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

image-20230718122117602

image-20230718122128524

配置好之后应该如下

image-20230718122151539

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

image-20230718122236567

运行前端:

image-20230718122254629

在里面跑一下 npm run dev

image-20230718122349810

image-20230718122359751

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

posted on 2023-07-18 12:26  言行一  阅读(15)  评论(0编辑  收藏  举报