FlashWo1f / design

毕业设计

用户操作手册

操作环境

开发工具为VS Code。 最佳实践应在VS Code。

操作简介

1. 拷贝项目
2. 安装项目依赖: 该文件夹下命令行输入 npm i || yarn
3. 开启mysql服务器。创建design数据库。账号名最好是root 密码123456 如果不是 则需要去server/db.js里修改配置
4. 初始化数据：该文件夹下命令行输入 node server/db
5. 启动node服务: 该文件夹下命令行输入 node server/server => localhost:9094
6. 启动前端服务：该文件夹下命令行输入 npm run start => localhost:8000

项目

• 如果要使用 react 的话，对新手来说，首选脚手架大概就是使用由 facebook 官方出的脚手架 create-react-app 了
• create-react-app 将 webpack 的配置，lint 的配置，babel 的配置等封装成 react-scripts，这种做法保证了底层依赖版本升级和迁移的时候，可以平滑迁移，不会影响到业务项目。
• create-react-app 支持开发者对项目进行个性化配置（通过配合 react-app-rewired 使用或yarn eject 暴露 相关配置后进行修改）。

配置参考

初始化

create-reate-app --template typescript design

tips

路径alias

在tsconfig.json中

{
  "compilerOptions": {
  // ...
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"],
      "@com/*": ["component/*"]
    }
  }
}

加上之后，出现了诡异的一幕，在我npm start的时候 上面修改的paths自动消失了

解决办法

在tsconfig.json的同级加一个json文件 内容:

{
  "compilerOptions": {
  // ...
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"],
      "@com/*": ["component/*"]
    }
  }
}

然后再tsconfig.json中

"extends": "./paths.json"

引入less

1. yarn eject 暴露config和script
2. yarn add less less-loader -D 安装less & less-loader到开发环境
3. 修改webpack配置

  const lessRegex = /\.less$/;  // 新增less配置
  const lessModuleRegex = /\.module\.less$/; // 新增less配置
  /* 下面是原有代码块 */
  {
    test: cssModuleRegex,
    use: getStyleLoaders({
      importLoaders: 1,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    }),
  },
  /* 上面是原有代码块 */
  /* 下面是添加代码块 */
  {
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders({
      importLoaders: 1,// 值是1
      sourceMap: isEnvProduction && shouldUseSourceMap
    },
      "less-loader"
    ),
    sideEffects: true
  },
  {
    test: lessModuleRegex,
    use: getStyleLoaders({
      importLoaders: 1,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true, // 增加这个可以通过模块方式来访问less
      getLocalIdent: getCSSModuleLocalIdent
    },
      "less-loader"
    )
  },
  /* 上面是添加代码块 */
  /* 下面是原有代码块 */
  {
    test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
      'sass-loader'
    ),
    sideEffects: true,
  },
  /* 上面是原有代码块 */

server 可以参考douban e91cb3743612252437896f79a815e44bb2bb545c 在前端项目里面嵌入了一个node项目

Sequelize 初步使用

https://sequelize.org/ 在 Node Web 开发过程中，后台数据库我一直使用的都是 Mysql。起初在做 Node Web 开发的时候，都是提前在 Mysql 图形界面里创建好数据表，然后再开始实际开发，这个过程一直穿插在整个项目的开发过程中。一个人在一台机器上，做全栈的开发，这个过程可能并不会出现什么问题，因为数据表结构以及整个项目代码都在一台电脑上，不管你怎么修改，都是一套代码，一个数据库结构。

然而，当你需要在多台电脑之间协同工作的时候，你就会发现这种方式的弊端。比如在A电脑上修改了数据表结构之后，接着去B电脑上继续编码，我们虽然能通过Git同步代码，但是数据表结构却无法同步过去，我们就需要在B电脑上，手动将数据库结构维护成一致，否则无法接着进行。这种操作方式非常的不方便，而且很LOW。

而 Sequelize 框架就能很好的解决这个问题，通过 Sequelize 框架，我们将每个数据表直接定义为数据模型，通过调用数据模型的一些方法，就可以直接操作数据库，甚至是同步数据表结构。

node server/db
就创建了表，太舒服了
node server/server
创建服务

查询表的内容

const account = sequelize.define('account', {})
// 在其他文件中
const sequelize = require('./db')
const account = sequelize.model('account')
// res 即account里面的数据数组
account.findAll().then(res => console.log(res))
Array.isArray(res)  // true

关联表

// 将bookInfo归属于book表
bookInfo.belongsTo(book, { foreignKey: 'ISBN', targetKey: 'ISBN' })
// 在连表查询的时候
Router.post('/detail', function(req, res) {
  const { ISBN } = req.body 
  // 只能在bookInfo的查询里面去include model book 反过来就会报错
  // 其实node方面res.json里面返回到前端的数据格式可以再优化一些，由于所花时间问题，在这方面粗糙了一些，将重点放在了前端上面 后续如果优化此项目的话，可以考虑将node层配合接口axios去重构一下数据格式
  bookInfo.findOne({
    include: [{
      model: book
    }],
    where: { ISBN }
  }).then(ret => {
    return res.json({
      data: ret,
      ...trueRes
    })
  })
})

创建数据库

1. 管理员权限进入cmd, 进入mysql的bin文件夹
2. mysql -u root -p 输入密码进入数据库(前提是mysql服务已经开着)
3. CREATE DATABASE IF NOT EXISTS design DEFAULT CHARSET utf8 COLLATE utf8_general_ci; use design;(默认设置utf-8)

css

text-indent 首行文本缩进

跨域

本地服务在9094端口，前端在3000端口，即使是本地，端口不一样还是跨域的 https://www.jianshu.com/p/f9b0b720e2cb https://www.html.cn/create-react-app/docs/proxying-api-requests-in-development/

bug

添加了setupProxy.js文件 paths文件中也导出了 proxySetup: resolveApp('src/setupProxy.js') 但是就是没用

放弃代理，直接在请求头和响应头里做处理

将Header导入app.tsx，因为header中用了withRouter报错。 You should not use <withRouter(Header) /> outside a 用useHistory又报错 Cannot read property 'history' of undefined return useContext(Context).history

跳转到页面指定位置

1. 本以为给目标盒子加上id, 然后将window.location.hash = "#id"就行 以失败告终

setTimeout(() => {
       const ele: any = document.getElementById("comments")
       ele.scrollIntoView()
     }, 0);

失败

阻止事件冒泡

在首页评论中，希望展开上面的点击事件不要冒泡

(e) => e.stopPropagation();

图片

请求图片403问题。 豆瓣对请求源做了处理 需要我们在html的meta中加入

<meta name="referrer" content="no-referrer">

// /server/server.js
app.all('*', function (req, res, next) {
  console.log("req", req.connection.remoteAddress)
  res.header("Access-Control-Allow-Origin", "http://127.0.0.1:3000");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("Access-Control-Allow-Credentials", "true");
  res.header("X-Powered-By", '3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});
// /src/api/index.ts
headers: {
  // 设置
  'Content-Type': 'application/x-www-form-urlencoded',
  "origin": "http://127.0.0.1:3000",
  // 'Access-Control-Allow-Origin': '*'
  // "Access-Control-Allow-Credentials": "true"
},
// 前端起的服务要和上面的origin一致  所以不能用localhost

// 综上还是会在控制台打印出
// xhr.js:126 Refused to set unsafe header "origin"

文本省略 固定CSS属性组合

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 120px;