Flask+VUE前后端分离的登入注册系统实现

首先Pycharm创建一个Flask项目：

 

Flask连接数据库需要下载的包：

pip install -U flask-cors
pip install flask-sqlalchemy

Flask 连接和操作Mysql数据库 - 王滚滚啊 - 博客园 (cnblogs.com)

sqlAlchemy基本使用 - 简书 (jianshu.com)

Flask+Vue前后端分离工程化最佳实践-初体验 - 知乎 (zhihu.com)

Vue使用

1.vue使用sessionStorage渲染页面数据

可以使用sessionStorage来在Vue中渲染页面数据。sessionStorage是一个浏览器API，可以存储键值对，这些数据将在浏览器会话期间保存。在Vue中，可以使用以下代码将数据存储在sessionStorage中：

sessionStorage.setItem('key', JSON.stringify(data));

其中，key是数据的键，data是要存储的数据。使用JSON.stringify()将数据转换为字符串进行存储。

要在Vue中读取并渲染存储在sessionStorage中的数据，可以在Vue组件的mounted生命周期钩子中获取并解析存储的数据。例如：

export default {
  name: 'MyComponent',
  mounted() {
    const data = JSON.parse(sessionStorage.getItem('key'));
    // 渲染数据到页面
    this.myData = data;
  },
  data() {
    return {
      myData: null,
    };
  },
};

在上面的代码中，mounted生命周期钩子在组件挂载后立即执行。通过调用sessionStorage.getItem('key')方法，我们可以获取之前存储的数据。我们然后将其解析为JavaScript对象，使用该对象渲染组件的模板。

请注意，sessionStorage只在浏览器会话期间保持数据。如果用户关闭浏览器或浏览器会话过期，则数据将丢失。如果需要长期保存数据，则应该考虑使用服务器端存储方案，例如数据库。

得到json数据后如何获取具体某个值，可以使用点号（.）或方括号（[]）来访问对象中的属性或数组中的元素。

如果你有一个包含JSON数据的JavaScript对象或变量，可以通过点号访问该对象的属性，或通过方括号访问该对象的属性或数组中的元素。例如：

const myObj = { "name": "Alice", "age": 30 };
console.log(myObj.name);  // 输出 "Alice"

const myArr = [1, 2, 3, 4, 5];
console.log(myArr[2]);  // 输出 3

在Vue中，如果你从后端API获取JSON数据并将其存储在组件的data对象中，可以通过点号或方括号访问其中的值。例如：

export default {
  data() {
    return {
      myData: {
        name: 'Alice',
        age: 30,
      },
    };
  },
  methods: {
    logName() {
      console.log(this.myData.name);  // 输出 "Alice"
    },
  },
};

在上面的代码中，我们使用了点号来访问myData对象的name属性，并将其输出到控制台中。你可以使用类似的方法来访问其他属性或数组中的元素。