标签: frontend

如何保护我的后端不被其他未经授权的前端应用程序访问？我用谷歌搜索，找不到提供完整解决方案的解决方案。Instagram、Facebook 等公司如何阻止未经授权的请求？我读到 SSL 密钥可以通过对前端进行逆向工程找到。我是一个菜鸟，正在为一个项目构建一个社交网络。请指导我。

我试图使我的文本适合这张卡的高度，并使用省略号隐藏溢出，正如您所看到的，如果我使用空白：不换行，它可以工作，但使我的文本块成为一行。如果我使用“正常”，我会恢复我的块，但省略号消失了......我怎样才能实现这一目标？

<vx-card >
    <template slot="actions">
      <span class="text-grey">{{Time | moment("MM/D/YYYY, h:mm:ss a")}} 
      </span>
    </template>
      <p class="myoverflow" >{{PostContent}}</p>
        <div slot="footer">
          <vs-row vs-justify="flex-end">
            <vs-button color="primary" type="gradient" >View</vs-button>
            <vs-button color="danger" type="gradient" >Delete</vs-button>
          </vs-row>
        </div>
  </vx-card>

CSS：

.myoverflow{
  text-overflow: ellipsis;
  height: 100px;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

.myoverflow{
  text-overflow: ellipsis;
  height: 100px;
  width: 100%;
  display: block;
  white-space: normal;
  overflow: hidden;
}

我正在使用 React 来实现一项功能，它可以保存输入中的文本并自动更新到本地存储，我希望即使刷新页面，输入中的文本也会保留，并且状态不会从头开始重置。谢谢你帮助我，祝你有美好的一天。请在以下代码和盒子代码和盒子链接中给我一个演示。再一次非常感谢你

我有一个页面，其中包含三个 div，每个 div 是一个段落。我想使用 javascript 在用户从导航栏按下每个 div 时仅在页面中显示 这是导航栏

WebDev 只是一个页面，由三个不同的 div 组成，如下所示

<!--HTML-->
<div class="html" id="html-show">
    <p class="text-html" id="htmlContent">..
    </p>
</div>

<!--CSS-->
<div class="css" id="css-show">
    <p class="text-css" id="cssContent">..
    </p>
</div>

<!--JS-->
<div class="js" id="js-show">
    <p class="text-js" id="jsContent">..
    </p>
</div>

因此，如果用户在导航栏中按下 HTML，他将被重定向到此页面，并且只有 HTML div 可见，CSS 和 js 也是如此。事实上，页面的其他部分也会显示（导航栏、页脚等......）

我使用 React 和 Redux 构建了一个购物车，但无法理解最佳实践流程。

我的购物车操作：

export const addToCart = (product) => (dispatch, getState) => {
  let { products: cartProducts } = getState().cart;
  let { newCartProducts, totalPrice } = handleAddToCart(cartProducts, product);
  dispatch(
    add({
      products: newCartProducts,
      total: totalPrice,
    })
  );
};

模拟服务器处理程序：（更新产品的所有逻辑都在这里 => 我的主要问题是这是否有意义。

export function handleAddToCart(cartProducts, currentProduct) {
  let idx = cartProducts.findIndex((p) => p.id === currentProduct.id);
  let productInCart = cartProducts[idx];
  if (productInCart) {
    let updatedProduct = {
      ...currentProduct,
      quantity: productInCart.quantity + 1,
      price:
        productInCart.price +
        applySale({
          ...currentProduct,
          quantity: productInCart.quantity + …

我有一个市场，人们可以在其中以本国货币出售他们的产品。来自世界各地的人们都可以购买他们的产品，但始终以产品卖家的货币收费。

因此，如果德国卖家向英国某人出售商品，英国买家将以欧元支付。

但我希望用户能够看到以当地货币表示的价格，并且他们可以通过某些界面选择当地货币。

所以我的问题是：谁应该拥有货币兑换权？

后端是否应该仅以“原始”货币（卖方定义的货币）存储“原始”价格，而前端根据用户的偏好处理货币转换？或者后端应该处理转换并将任何货币的价格提供回前端？

从可扩展性的角度来看，我们目前只使用几种不同的货币，但我们计划扩展到几种新的货币（可能是几十种）。

我们的产品涉及网站、iOS 和 Android 原生应用程序，它们都应该以相同的方式工作。

Module not found: Can't resolve '@emotion/react' in '...\node_modules\@mui\styled-engine'

我在 ReactJS 项目中使用 Material-UI 时遇到编译失败的问题，我检查了 @muinode_modules文件夹，但无法修复编译错误。大家有什么想法请与我分享。

我实际上对 React 有点陌生，而且还在学习中，所以我无法弄清楚如何根据我当前在应用程序上的页面来显示我的按钮。我正在使用路由器 v6。这是我的路由器，里面有我的组件：

     <Router>
        <Navbar />
        <Routes>
          <Route
            path="/"
            element={<HomePage />} />
          <Route
            path="/CountryPage"
            element={<CountryPage />} />
        </Routes>
      </Router>

这是我的导航栏：

const Navbar = () => {
  return (
    <nav className="navbar-container">
      <div>
        <div>
          <ul className="navbar">
            <li>
              <Link to="/" className="home"> <AiOutlineLeft /> </Link>
            </li>
            <li data-testid="tab-name">
              Current Tab
            </li>
            <li>
              <BsFillGearFill className="settings" />
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};

<li> <Link to="/" className="home"> <AiOutlineLeft /> </Link> </li>所以我想要的只是显示仅当我不在主页中时才显示的按钮，HomePage所以如果我在主页中我不想显示任何内容。

任何想法？

我想将唯一数据添加到我的存储数组中，但在添加数据时似乎陷入困境，并且重复数据被推入数组中。我正在使用打字稿。

所以我的切片函数看起来像这样。

const initialState = {
  dropDownData:{
  programs: [],
  years: []
 }
}

const slice = createSlice({
  name:"filterSlice",
  initialState: initialState,
  reducers:{
     updateProgram:(state, action) => {
 state.dropDownData.programs = [...state.dropDownData.programs, action.payload];
   }
 }
});

我以这种方式调用这个减速函数：dispatch(updateProgram(program))

所以我得到的程序是数组的形式。但我不需要程序数组中的重复数据。

那么如何更新我的减速器功能。

我正在使用 Material UI 在 React.js 中进行响应式 UI 设计，我必须遵循这些考虑因素，并且可以制定最佳且简单的方法来实现响应式 UI 仪表板 - 我正在寻找最好的帮助资源、文档和博客。