记录一下个人网站开发路程。

原创已于 2022-03-03 09:12:25 修改 · 396 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nodejs #前端 #vue.js

于 2020-01-14 16:51:01 首次发布

笔记同时被 3 个专栏收录

1 篇文章

订阅专栏

1 篇文章

订阅专栏

nest

1 篇文章

订阅专栏

本文分享了作者从HybridApp及小程序开发转向全栈个人网站开发的心路历程，计划采用Vue、Element-UI、Node.js及MySQL进行前端与后端开发，注重代码质量和全平台适配，包括解决跨域问题等技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好久没写网页了，工作后主要开发hybrid app，小程序也有所接触，对pc端生疏了。
这次打算完整的写pc、移动端自适应的个人网站，以目前的知识点来看，还是挺有挑战的。
经过一段时间的了解，打算用vue+element-ui+node+mysql写web端，如果后面时间允许，还会打算做app端。做个完整的客户端（理想很丰满，显示很骨感）。
这次开发还是更注重代码质量，开发可以慢，质量不能烂。

备注：已停止csdn更新，目前网站已通过next(博客前端)+nest(后端)+react(admin)完成，

地址：inspring.cloud

技术参考网站：
vue :
vuex比较好的一篇参考文章：https://segmentfault.com/a/1190000015782272
node :
mysql :

小白开发，持续更新，不对的地方欢迎指正。

开发遇到的一些坑：
1.跨域的问题：

// app.use(cors());
// 跨域处理
app.all("*", function (req, res, next) {
  //设置允许跨域的域名，*代表允许任意域名跨域
  console.log(req.headers);
  res.header("Access-Control-Allow-Origin", req.headers.origin);
  //允许的header类型
  res.header("Access-Control-Allow-Headers", "content-type");

  res.header("Access-Control-Allow-Credentials", true);
  //跨域允许的请求方式 
  res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
  res.header('Content-Type', 'application/json;charset=UTF-8');
  // if (err.name === 'UnauthorizedError') {
  //   //这个需要根据自己的业务逻辑来处理（ 具体的err值 请看下面）
  //   console.log('invalid token...');
    
  //   res.status(401).send('invalid token...');
  // }
  if (req.method.toLowerCase() == 'options') {
    console.warn(222);
    res.sendStatus(200);  //让options尝试请求快速结束
  } else {
    next();
  }
})

用cookie做登录校验，在上面代码中app.use(cors())和下面的代码作用冲突了，导致options请求和post都出现问题，去掉就好了。
在谷歌80版本后对cookie的校验更加严格，有些情况下cookie无法传送到后台，传送门：https://blog.csdn.net/qq_37788558/article/details/104484888